zark-design 1.0.0

package/templates/components.jsx

@@ -0,0 +1,385 @@
+// Zark — Components showcase
+
+const SubLabel = ({ children }) => (
+  <div style={{
+    fontFamily:'var(--font-mono)', fontSize: 10,
+    letterSpacing:'var(--ls-wider)', textTransform:'uppercase',
+    color:'var(--ink-300)', marginBottom: 12,
+  }}>{children}</div>
+);
+
+const ComponentRow = ({ label, children, style }) => (
+  <div style={{ marginBottom: 24 }}>
+    <SubLabel>{label}</SubLabel>
+    <div style={{ display:'flex', flexWrap:'wrap', alignItems:'center', gap: 10, ...style }}>
+      {children}
+    </div>
+  </div>
+);
+
+// ---------- BUTTONS ----------
+const ButtonsShowcase = () => (
+  <Panel title="Buttons" kicker="5 variants × 4 sizes">
+    <ComponentRow label="Variants — md">
+      <Button variant="primary" icon={<Icons.Upgrade size={14}/>}>Upgrade</Button>
+      <Button variant="secondary">Get code</Button>
+      <Button variant="soft" icon={<Icons.Sparkles size={14}/>}>Try with AI</Button>
+      <Button variant="ghost" icon={<Icons.ChevLeft size={14}/>}>Back</Button>
+      <Button variant="danger" icon={<Icons.Stop size={14}/>}>Stop</Button>
+    </ComponentRow>
+    <ComponentRow label="Sizes — primary">
+      <Button variant="primary" size="xs">XS</Button>
+      <Button variant="primary" size="sm">Small</Button>
+      <Button variant="primary" size="md">Medium</Button>
+      <Button variant="primary" size="lg">Large</Button>
+    </ComponentRow>
+    <ComponentRow label="With icons">
+      <Button variant="primary" iconRight={<Icons.ChevRight size={14}/>}>Start scraping</Button>
+      <Button variant="secondary" icon={<Icons.Download size={14}/>}>JSON</Button>
+      <Button variant="secondary" icon={<Icons.Code size={14}/>}>Markdown</Button>
+      <Button variant="ghost" icon={<Icons.Plus size={14}/>}>Add</Button>
+    </ComponentRow>
+    <ComponentRow label="States">
+      <Button variant="primary">Default</Button>
+      <Button variant="primary" style={{ background:'var(--ember-700)' }}>Hover</Button>
+      <Button variant="primary" style={{ background:'var(--ember-800)' }}>Pressed</Button>
+      <Button variant="secondary" disabled style={{ opacity: 0.5, cursor:'not-allowed' }}>Disabled</Button>
+      <Button variant="primary" icon={<Icons.Spinner size={14} style={{ animation:'zark-spin 1s linear infinite' }}/>}>Loading…</Button>
+    </ComponentRow>
+    <Spec label="Heights" value="22 / 28 / 32 / 40 px" mono/>
+    <Spec label="Border radius" value="r-sm → r-lg" mono/>
+    <Spec label="Primary fill" value="ember-600 → ember-700 hover" mono/>
+  </Panel>
+);
+
+// ---------- INPUTS ----------
+const InputsShowcase = () => {
+  const [v, setV] = React.useState('');
+  const [on, setOn] = React.useState(true);
+  const [tab, setTab] = React.useState('scrape');
+  return (
+    <Panel title="Inputs, toggles, segmented">
+      <ComponentRow label="Text inputs">
+        <div style={{ width: 280 }}>
+          <Input icon={<Icons.Search size={14}/>} placeholder="Search..." value={v} onChange={e=>setV(e.target.value)} suffix={<Kbd>⌘K</Kbd>}/>
+        </div>
+        <div style={{ width: 280 }}>
+          <Input icon={<Icons.Globe size={14}/>} placeholder="https://example.com"/>
+        </div>
+        <div style={{ width: 220 }}>
+          <Input mono value="fc-9••••••••••••aebf" readOnly suffix={<span style={{display:'inline-flex',gap:4}}><Icons.Eye size={14}/><Icons.Copy size={14}/></span>}/>
+        </div>
+      </ComponentRow>
+
+      <ComponentRow label="URL pill (search-style)">
+        <div style={{
+          display:'flex', alignItems:'center', width: 520, height: 44,
+          background:'var(--surface)',
+          border:'1px solid var(--line-300)',
+          borderRadius:'var(--r-pill)',
+          boxShadow:'var(--shadow-sm)',
+          overflow:'hidden',
+        }}>
+          <span style={{
+            display:'inline-flex', alignItems:'center', gap:6,
+            padding:'0 14px', height:'100%',
+            color:'var(--ink-400)', fontFamily:'var(--font-mono)', fontSize: 12,
+            borderRight:'1px solid var(--line-200)',
+          }}><Icons.Globe size={14}/> https://</span>
+          <input placeholder="www.nngroup.com/articles/..."
+            style={{
+              flex:1, border:'none', outline:'none', background:'transparent',
+              padding:'0 16px', fontSize: 13, color:'var(--ink-700)',
+              fontFamily:'var(--font-mono)',
+            }}/>
+        </div>
+      </ComponentRow>
+
+      <ComponentRow label="Segmented (Scrape / Search / Map / Crawl)">
+        <Segmented value={tab} onChange={setTab} items={[
+          { value:'scrape',  label:'Scrape', icon:<Icons.Drag size={14}/> },
+          { value:'search',  label:'Search', icon:<Icons.Search size={14}/>, tag:'New' },
+          { value:'map',     label:'Map',    icon:<Icons.Filter size={14}/> },
+          { value:'crawl',   label:'Crawl',  icon:<Icons.Close size={14}/> },
+        ]}/>
+      </ComponentRow>
+
+      <ComponentRow label="Toggles">
+        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
+          <Toggle on={on} onChange={setOn}/>
+          <span style={{ fontSize: 13, color:'var(--ink-600)' }}>Main content only</span>
+        </div>
+        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
+          <Toggle on={!on} onChange={(v)=>setOn(!v)}/>
+          <span style={{ fontSize: 13, color:'var(--ink-600)' }}>Stealth mode</span>
+          <Tag tone="default" size="xs" square>5 cr / page</Tag>
+        </div>
+      </ComponentRow>
+    </Panel>
+  );
+};
+
+// ---------- TAGS / BADGES ----------
+const TagsShowcase = () => (
+  <Panel title="Tags, badges, kbd">
+    <ComponentRow label="Tags — pill">
+      <Tag tone="ember">New</Tag>
+      <Tag tone="default">Optional</Tag>
+      <Tag tone="success">Claimed</Tag>
+      <Tag tone="success">Completed</Tag>
+      <Tag tone="info">Live</Tag>
+      <Tag tone="warning">Pending</Tag>
+      <Tag tone="danger">Failed</Tag>
+    </ComponentRow>
+    <ComponentRow label="Tags — square (data labels)">
+      <Tag tone="mono" size="xs" square>TypeScript</Tag>
+      <Tag tone="mono" size="xs" square>Python</Tag>
+      <Tag tone="mono" size="xs" square>Next.js</Tag>
+      <Tag tone="mono" size="xs" square>Zark SDK</Tag>
+      <Tag tone="mono" size="xs" square>AI SDK</Tag>
+    </ComponentRow>
+    <ComponentRow label="Notification badges">
+      <div style={{ position:'relative', display:'inline-block' }}>
+        <Button variant="ghost" icon={<Icons.Bell size={16}/>}/>
+        <div style={{ position:'absolute', top: 2, right: 2 }}><Badge count={1}/></div>
+      </div>
+      <div style={{ position:'relative', display:'inline-block' }}>
+        <Button variant="ghost" icon={<Icons.Help size={16}/>}>Help</Button>
+        <div style={{ position:'absolute', top: -4, right: -4 }}><Badge count={6}/></div>
+      </div>
+    </ComponentRow>
+    <ComponentRow label="Keyboard shortcuts">
+      <span style={{ display:'inline-flex', gap:4 }}><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
+      <span style={{ display:'inline-flex', gap:4 }}><Kbd>⇧</Kbd><Kbd>↵</Kbd></span>
+      <span style={{ display:'inline-flex', gap:4 }}><Kbd>Esc</Kbd></span>
+    </ComponentRow>
+  </Panel>
+);
+
+// ---------- ENDPOINT CARD ----------
+const EndpointCard = ({ icon, label, tag, desc }) => (
+  <div style={{
+    flex:1, minWidth: 200,
+    border:'1px solid var(--line-200)',
+    background:'var(--surface)',
+    padding: 18,
+    cursor:'pointer',
+    transition:'border-color var(--t-fast)',
+  }}
+  onMouseEnter={e=>e.currentTarget.style.borderColor='var(--ink-300)'}
+  onMouseLeave={e=>e.currentTarget.style.borderColor='var(--line-200)'}>
+    <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 10 }}>
+      <span style={{ color:'var(--ember-600)' }}>{icon}</span>
+      <span style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>{label}</span>
+      <Icons.ChevRight size={12}/>
+      {tag && <Tag tone="ember" size="xs">{tag}</Tag>}
+    </div>
+    <div style={{ fontSize: 12, color:'var(--ink-400)', lineHeight: 1.5 }}>{desc}</div>
+  </div>
+);
+
+const CardsShowcase = () => (
+  <Panel title="Cards" padded={false}>
+    <div style={{ padding: 24 }}>
+      <SubLabel>Endpoint cards — borderless row</SubLabel>
+      <div style={{ display:'flex', gap: 0, marginTop: 4 }}>
+        <EndpointCard icon={<Icons.Drag size={14}/>} label="Scrape" desc="Get llm-ready data from websites. Markdown, JSON, screenshot, etc."/>
+        <EndpointCard icon={<Icons.Search size={14}/>} label="Search" tag="NEW" desc="Search the web and get full content from results."/>
+        <EndpointCard icon={<Icons.Globe size={14}/>} label="Crawl" desc="Crawl all the pages on a website and get data for each page."/>
+        <EndpointCard icon={<Icons.Sparkles size={14}/>} label="Extract" desc="Get structured data from websites with AI."/>
+      </div>
+    </div>
+
+    <div style={{ borderTop:'1px solid var(--line-100)', padding: 24 }}>
+      <SubLabel>Stat / data card</SubLabel>
+      <div style={{
+        background:'var(--surface)', border:'1px solid var(--line-200)',
+        borderRadius:'var(--r-xl)', padding: 20, maxWidth: 460,
+      }}>
+        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>Scraped pages — Last 7 days</div>
+            <div style={{ fontSize: 12, color:'var(--ink-400)', marginTop: 2 }}>Credit usage differs</div>
+          </div>
+          <div style={{ fontSize: 28, fontWeight: 600, color:'var(--ink-700)', fontFamily:'var(--font-display)' }}>2</div>
+        </div>
+        <div style={{ marginTop: 18, display:'flex', justifyContent:'center' }}>
+          <AsciiCurve width={62} height={10}/>
+        </div>
+        <div style={{ marginTop: 8, display:'flex', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize: 9, color:'var(--ink-300)' }}>
+          <span>08/29</span><span>09/01</span><span>09/05</span>
+        </div>
+      </div>
+    </div>
+
+    <div style={{ borderTop:'1px solid var(--line-100)', padding: 24 }}>
+      <SubLabel>Integration tile</SubLabel>
+      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, maxWidth: 700, border:'1px solid var(--line-200)', borderRadius:'var(--r-xl)', overflow:'hidden' }}>
+        {[
+          ['Python','snake','#3572A5'],
+          ['JS/TS SDK','JS','#F7DF1E'],
+          ['Langchain','🦜','#1D6F42'],
+          ['Make','M','#7341FF'],
+          ['Discord','D','#5865F2'],
+          ['Pipedream','P','#42BD41'],
+        ].map(([name,abbr,clr],i)=>(
+          <div key={name} style={{
+            display:'flex', alignItems:'center', justifyContent:'space-between',
+            padding:'14px 16px',
+            borderBottom: i < 3 ? '1px solid var(--line-100)' : 'none',
+            borderRight: (i % 3) < 2 ? '1px solid var(--line-100)' : 'none',
+            cursor:'pointer',
+          }}>
+            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
+              <span style={{ width: 22, height: 22, borderRadius:'var(--r-sm)', background: clr, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 10, fontWeight: 700 }}>{abbr.charAt(0)}</span>
+              <span style={{ fontSize: 13, color:'var(--ink-700)' }}>{name}</span>
+            </div>
+            <Icons.External size={12} style={{ color:'var(--ink-300)' }}/>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div style={{ borderTop:'1px solid var(--line-100)', padding: 24 }}>
+      <SubLabel>Project / example card with tags</SubLabel>
+      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, maxWidth: 700 }}>
+        {[
+          {t:'30+ Examples', d:'Collection of simple projects built with Zark', tags:['TypeScript','Python','Zark SDK']},
+          {t:'LLMs.txt Generator', d:'Generate an llms.txt with this web app built on Next.js', tags:['TypeScript','Next.js','Zark SDK']},
+        ].map(p=>(
+          <div key={p.t} style={{
+            border:'1px solid var(--line-200)', borderRadius:'var(--r-xl)',
+            padding: 16, background:'var(--surface)', cursor:'pointer',
+          }}>
+            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 6 }}>
+              <div style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>{p.t}</div>
+              <Icons.External size={12} style={{ color:'var(--ink-300)' }}/>
+            </div>
+            <div style={{ fontSize: 12, color:'var(--ink-400)', lineHeight: 1.5, marginBottom: 12 }}>{p.d}</div>
+            <div style={{ display:'flex', flexWrap:'wrap', gap: 6 }}>
+              {p.tags.map(t=><Tag key={t} tone="mono" size="xs" square>{t}</Tag>)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </Panel>
+);
+
+// ---------- NAVIGATION ----------
+const SidebarItem = ({ icon, label, active, sub, kbd }) => (
+  <div style={{
+    display:'flex', alignItems:'center', gap: 10,
+    padding:'7px 10px',
+    fontSize: 13,
+    color: active ? 'var(--ember-700)' : 'var(--ink-500)',
+    background: active ? 'var(--ember-50)' : 'transparent',
+    borderRadius:'var(--r-md)',
+    cursor:'pointer', userSelect:'none',
+    fontWeight: active ? 500 : 400,
+  }}>
+    <span style={{ color: active ? 'var(--ember-600)' : 'var(--ink-400)' }}>{icon}</span>
+    <span style={{ flex: 1 }}>{label}</span>
+    {kbd}
+    {sub && <Icons.ChevDown size={12}/>}
+  </div>
+);
+
+const NavShowcase = () => (
+  <Panel title="Navigation — sidebar" padded={false}>
+    <div style={{ display:'flex' }}>
+      <div style={{
+        width: 240, background:'var(--canvas)',
+        borderRight:'1px solid var(--line-200)',
+        padding: 12, display:'flex', flexDirection:'column', gap: 4,
+        minHeight: 480,
+      }}>
+        <div style={{ padding:'8px 10px 16px' }}>
+          <ZarkLogo/>
+        </div>
+        <div style={{ padding:'0 4px 8px' }}>
+          <Input size="sm" icon={<Icons.Search size={12}/>} placeholder="Search" suffix={<Kbd>⌘K</Kbd>}/>
+        </div>
+        <SidebarItem icon={<Icons.Home size={16}/>} label="Overview" active/>
+        <SidebarItem icon={<Icons.Play size={16}/>} label="Playground"/>
+        <SidebarItem icon={<Icons.Extract size={16}/>} label="Extract" sub/>
+        <div style={{ marginLeft: 26, display:'flex', flexDirection:'column', gap: 2 }}>
+          <SidebarItem label="Overview"/>
+          <SidebarItem label="Playground"/>
+        </div>
+        <SidebarItem icon={<Icons.Activity size={16}/>} label="Activity Logs"/>
+        <SidebarItem icon={<Icons.Usage size={16}/>} label="Usage"/>
+        <SidebarItem icon={<Icons.Key size={16}/>} label="API Keys"/>
+        <SidebarItem icon={<Icons.Settings size={16}/>} label="Settings"/>
+
+        <div style={{ flex: 1 }}/>
+
+        <div style={{
+          margin: 4, padding: 12,
+          background:'var(--surface)',
+          border:'1px solid var(--line-200)',
+          borderRadius:'var(--r-lg)',
+        }}>
+          <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 4 }}>
+            <Icons.Sparkles size={12} style={{ color:'var(--ember-500)' }}/>
+            <span style={{ fontSize: 12, fontWeight: 600, color:'var(--ink-700)' }}>What's New</span>
+            <span style={{ fontSize: 10, color:'var(--ember-600)', fontFamily:'var(--font-mono)' }}>(6)</span>
+          </div>
+          <div style={{ fontSize: 11, color:'var(--ink-400)' }}>View our latest update</div>
+        </div>
+
+        <div style={{ display:'flex', alignItems:'center', gap: 8, padding:'8px 10px' }}>
+          <Avatar name="S" size={22} square color="var(--ember-500)"/>
+          <span style={{ fontSize: 11, color:'var(--ink-500)', fontFamily:'var(--font-mono)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>sam@zark.app</span>
+        </div>
+        <div style={{ display:'flex', alignItems:'center', gap: 6, padding:'8px 10px', fontSize: 12, color:'var(--ink-400)', cursor:'pointer' }}>
+          <Icons.ChevLeft size={12}/> Collapse
+        </div>
+      </div>
+
+      {/* Topbar preview */}
+      <div style={{ flex: 1, padding: 0, background:'var(--paper)' }}>
+        <div style={{
+          height: 56, padding:'0 24px',
+          display:'flex', alignItems:'center', justifyContent:'space-between',
+          borderBottom:'1px solid var(--line-200)',
+        }}>
+          <div style={{
+            display:'inline-flex', alignItems:'center', gap: 8,
+            padding:'6px 12px', background:'var(--ember-50)',
+            border:'1px solid var(--ember-200)',
+            borderRadius:'var(--r-md)',
+          }}>
+            <Avatar name="P" size={18} square color="var(--ember-500)"/>
+            <span style={{ fontSize: 13, color:'var(--ember-700)', fontWeight: 500 }}>Personal Team</span>
+            <Icons.ChevDown size={12} style={{ color:'var(--ember-700)' }}/>
+          </div>
+          <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
+            <Button variant="ghost" size="sm" icon={<Icons.Bell size={14}/>}/>
+            <Button variant="ghost" size="sm" icon={<Icons.Help size={14}/>}>Help</Button>
+            <Button variant="secondary" size="sm" icon={<Icons.Docs size={14}/>}>Docs</Button>
+            <Button variant="primary" size="sm" icon={<Icons.Upgrade size={14}/>}>Upgrade</Button>
+          </div>
+        </div>
+        <div style={{ padding: 32 }}>
+          <SubLabel>Sidebar states</SubLabel>
+          <div style={{ display:'flex', flexDirection:'column', gap: 4, maxWidth: 240, marginTop: 12 }}>
+            <SidebarItem icon={<Icons.Home size={16}/>} label="Default"/>
+            <SidebarItem icon={<Icons.Play size={16}/>} label="Hover" active={false} style={{ background:'var(--ink-50)' }}/>
+            <SidebarItem icon={<Icons.Activity size={16}/>} label="Active (selected)" active/>
+          </div>
+          <Spec mono label="Width" value="240px"/>
+          <Spec mono label="Background" value="canvas"/>
+          <Spec mono label="Active fill" value="ember-50 + ember-700"/>
+          <Spec mono label="Item height" value="32px (sp-8)"/>
+        </div>
+      </div>
+    </div>
+  </Panel>
+);
+
+window.ButtonsShowcase = ButtonsShowcase;
+window.InputsShowcase = InputsShowcase;
+window.TagsShowcase = TagsShowcase;
+window.CardsShowcase = CardsShowcase;
+window.NavShowcase = NavShowcase;