@startsimpli/ui 0.4.30 → 0.4.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.30",
+  "version": "0.4.31",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -14,6 +14,7 @@
     "./utils": "./src/utils/index.ts",
     "./theme": "./src/theme/index.ts",
     "./theme/contract": "./theme/contract.css",
+    "./blog": "./src/components/blog/index.ts",
     "./email-editor": "./src/components/email-editor/index.ts",
     "./workflows": "./src/components/workflows/index.ts",
     "./workflows/styles": "./src/components/workflows/workflows.css",
@@ -32,9 +33,13 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.25"
+    "@startsimpli/api": "0.5.31",
+    "@startsimpli/auth": "0.4.26"
   },
   "peerDependenciesMeta": {
+    "@startsimpli/api": {
+      "optional": true
+    },
     "@startsimpli/auth": {
       "optional": true
     },
@@ -67,6 +72,9 @@
     "lucide-react": "^0.408.0",
     "react-big-calendar": "^1.19.4",
     "react-day-picker": "^9.14.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.1",
     "tailwindcss-animate": "^1.0.7",
     "xlsx": "^0.18.5"
@@ -84,6 +92,7 @@
     "@types/react": "^19.2.14",
     "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^19.2.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^8.57.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.3.0",

package/src/components/blog/ArticleCard.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+import type { BlogPost } from '@startsimpli/api/blog'
+import { cn } from '../../utils/cn'
+
+export interface ArticleCardProps {
+  post: BlogPost
+  /** Destination href, e.g. `/blog/${post.slug}`. */
+  href: string
+  /** Pre-resolved image URL (use `getImageUrl` from the blog client). */
+  imageSrc?: string
+  /** Byline shown in the card footer (e.g. the site name). */
+  byline?: string
+  className?: string
+}
+
+/**
+ * Article preview card for blog index grids. Server-renderable; themed via
+ * shared tokens so it matches whichever app embeds it.
+ */
+export function ArticleCard({ post, href, imageSrc, byline, className }: ArticleCardProps) {
+  const src = imageSrc ?? post.image
+  return (
+    <Link href={href} className={cn('group block h-full', className)}>
+      <article className="bg-card rounded-xl shadow-sm border border-border hover:shadow-md transition-all overflow-hidden h-full flex flex-col">
+        {src && (
+          <div className="aspect-video bg-muted overflow-hidden">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={src}
+              alt={post.title}
+              loading="lazy"
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+          </div>
+        )}
+        <div className="p-6 flex-1 flex flex-col">
+          <h2 className="text-xl font-heading font-semibold text-foreground mb-3 group-hover:text-primary transition-colors line-clamp-2">
+            {post.title}
+          </h2>
+          {post.excerpt && (
+            <p className="text-muted-foreground text-sm mb-4 line-clamp-3 flex-1">{post.excerpt}</p>
+          )}
+          <div className="flex items-center justify-between text-sm text-muted-foreground mt-auto">
+            {byline ? <span>{byline}</span> : <span />}
+            {post.readTime && <span>{post.readTime}</span>}
+          </div>
+        </div>
+      </article>
+    </Link>
+  )
+}

package/src/components/blog/BlogIndex.tsx

@@ -0,0 +1,135 @@
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import type { BlogPost, BlogPagination } from '@startsimpli/api/blog'
+import { ArticleCard } from './ArticleCard'
+import { cn } from '../../utils/cn'
+
+export interface BlogIndexProps {
+  posts: BlogPost[]
+  pagination: BlogPagination
+  /** Current page (1-based). */
+  page: number
+  /** Route the index lives at, e.g. `/blog`. Used for card links + pagination. */
+  basePath?: string
+  /** Resolve a post's image URL (pass the client's `getImageUrl`). */
+  getImageUrl?: (url?: string | null) => string
+  /** Byline shown on each card (typically the site name). */
+  byline?: string
+  /** Hero copy. */
+  eyebrow?: string
+  title: string
+  subtitle?: string
+  /** Rendered in place of the grid when there are no posts. */
+  emptyState?: ReactNode
+  className?: string
+}
+
+/**
+ * Full blog index composer: hero + responsive card grid + windowed pagination.
+ * Apps supply data + copy; everything is themed with shared tokens. Per-app
+ * code reduces to fetching posts and rendering `<BlogIndex {...} />`.
+ */
+export function BlogIndex({
+  posts,
+  pagination,
+  page,
+  basePath = '/blog',
+  getImageUrl,
+  byline,
+  eyebrow,
+  title,
+  subtitle,
+  emptyState,
+  className,
+}: BlogIndexProps) {
+  const pageHref = (p: number) => (p <= 1 ? basePath : `${basePath}?page=${p}`)
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <section className="bg-gradient-to-b from-muted to-background py-12 md:py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          {eyebrow && (
+            <span className="inline-block mb-4 rounded-full bg-primary/10 text-primary border border-primary/20 px-3 py-1 text-sm font-medium">
+              {eyebrow}
+            </span>
+          )}
+          <h1 className="font-heading text-4xl sm:text-5xl font-bold text-foreground mb-4">{title}</h1>
+          {subtitle && <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{subtitle}</p>}
+        </div>
+      </section>
+
+      <section className="py-12 bg-background">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {posts.length === 0 ? (
+            emptyState ?? (
+              <div className="text-center py-12 text-muted-foreground">No articles yet — check back soon.</div>
+            )
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {posts.map((post) => (
+                  <ArticleCard
+                    key={post.id}
+                    post={post}
+                    href={`${basePath}/${post.slug}`}
+                    imageSrc={getImageUrl ? getImageUrl(post.image) : post.image}
+                    byline={byline}
+                  />
+                ))}
+              </div>
+
+              {pagination.pageCount > 1 && (
+                <div className="mt-12 flex justify-center items-center gap-2">
+                  {page > 1 && (
+                    <Link
+                      href={pageHref(page - 1)}
+                      className="px-4 py-2 border border-border rounded-lg text-muted-foreground hover:bg-muted transition-colors"
+                    >
+                      Previous
+                    </Link>
+                  )}
+                  <div className="flex items-center gap-2">
+                    {Array.from({ length: pagination.pageCount }, (_, i) => i + 1)
+                      .filter((p) => p === 1 || p === pagination.pageCount || Math.abs(p - page) <= 1)
+                      .map((p, idx, arr) => {
+                        const prev = arr[idx - 1]
+                        const showEllipsis = prev && p - prev > 1
+                        return (
+                          <span key={p} className="flex items-center gap-2">
+                            {showEllipsis && <span className="px-2 text-muted-foreground">…</span>}
+                            <Link
+                              href={pageHref(p)}
+                              className={cn(
+                                'px-4 py-2 rounded-lg transition-colors',
+                                p === page
+                                  ? 'bg-primary text-primary-foreground'
+                                  : 'border border-border text-muted-foreground hover:bg-muted',
+                              )}
+                            >
+                              {p}
+                            </Link>
+                          </span>
+                        )
+                      })}
+                  </div>
+                  {page < pagination.pageCount && (
+                    <Link
+                      href={pageHref(page + 1)}
+                      className="px-4 py-2 border border-border rounded-lg text-muted-foreground hover:bg-muted transition-colors"
+                    >
+                      Next
+                    </Link>
+                  )}
+                </div>
+              )}
+
+              <div className="mt-8 text-center text-sm text-muted-foreground">
+                Showing {posts.length} of {pagination.total} articles
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}

package/src/components/blog/BlogPost.tsx

@@ -0,0 +1,117 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { BlogPost as BlogPostType } from '@startsimpli/api/blog'
+import { MarkdownRenderer } from './MarkdownRenderer'
+import { JsonLd } from './JsonLd'
+import { cn } from '../../utils/cn'
+
+export interface BlogPostProps {
+  post: BlogPostType
+  /** Pre-resolved featured-image URL (pass the client's `getImageUrl`). */
+  imageSrc?: string
+  /** Index route, e.g. `/blog`. Used for breadcrumb + back link. */
+  basePath?: string
+  /** Label for the index in the breadcrumb / back link. Default "Blog". */
+  indexLabel?: string
+  /** Byline shown in the article meta. */
+  byline?: string
+  /** Syntax-highlight theme forwarded to the markdown renderer. */
+  theme?: 'light' | 'dark'
+  /** schema.org JSON-LD object(s) rendered into the page head. */
+  structuredData?: object | object[]
+  /** Optional sidebar (TOC, share widgets, CTAs). Rendered right of the content on lg+. */
+  sidebar?: ReactNode
+  className?: string
+}
+
+/**
+ * Full article-detail composer: JSON-LD, breadcrumb, title, byline/date,
+ * featured image, themed markdown body, optional sidebar, and back link.
+ * Per-app code reduces to fetching the post and rendering `<BlogPost {...} />`.
+ */
+export function BlogPost({
+  post,
+  imageSrc,
+  basePath = '/blog',
+  indexLabel = 'Blog',
+  byline,
+  theme = 'light',
+  structuredData,
+  sidebar,
+  className,
+}: BlogPostProps) {
+  const featured = imageSrc ?? post.image
+  const publishedLabel = post.publishedAt
+    ? new Date(post.publishedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+    : null
+
+  return (
+    <article className={cn('py-12', className)}>
+      {structuredData && <JsonLd data={structuredData} />}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <nav className="mb-8 text-sm" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2 text-muted-foreground">
+            <li>
+              <Link href="/" className="hover:text-primary transition-colors">
+                Home
+              </Link>
+            </li>
+            <li aria-hidden>/</li>
+            <li>
+              <Link href={basePath} className="hover:text-primary transition-colors">
+                {indexLabel}
+              </Link>
+            </li>
+            <li aria-hidden>/</li>
+            <li className="text-foreground line-clamp-1">{post.title}</li>
+          </ol>
+        </nav>
+
+        <div className={cn('grid grid-cols-1 gap-8', sidebar ? 'lg:grid-cols-12' : '')}>
+          <div className={sidebar ? 'lg:col-span-8' : 'max-w-3xl mx-auto w-full'}>
+            <h1 className="font-heading text-4xl md:text-5xl font-bold text-foreground mb-6">{post.title}</h1>
+
+            <div className="flex items-center gap-4 mb-8 pb-8 border-b border-border text-sm text-muted-foreground">
+              {byline && <span className="font-medium text-foreground">{byline}</span>}
+              {publishedLabel && (
+                <time dateTime={post.publishedAt}>{publishedLabel}</time>
+              )}
+              {post.readTime && (
+                <>
+                  <span aria-hidden>•</span>
+                  <span>{post.readTime}</span>
+                </>
+              )}
+            </div>
+
+            {featured && (
+              <div className="mb-10 rounded-xl overflow-hidden">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={featured} alt={post.title} className="w-full h-auto" />
+              </div>
+            )}
+
+            <MarkdownRenderer content={post.content} theme={theme} />
+
+            <div className="mt-12 pt-8 border-t border-border">
+              <Link
+                href={basePath}
+                className="inline-flex items-center gap-2 text-primary hover:opacity-80 font-medium transition-opacity"
+              >
+                <ArrowLeft className="w-5 h-5" />
+                Back to {indexLabel}
+              </Link>
+            </div>
+          </div>
+
+          {sidebar && (
+            <aside className="lg:col-span-4">
+              <div className="sticky top-8 space-y-6">{sidebar}</div>
+            </aside>
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}

package/src/components/blog/JsonLd.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react'
+
+/**
+ * Embed schema.org JSON-LD structured data.
+ *
+ * Pair with the generators from `@startsimpli/api/blog`
+ * (`createStructuredData(...).article(...)` etc.). Accepts a single object or an
+ * array; renders one `<script type="application/ld+json">` per item.
+ */
+export function JsonLd({ data }: { data: object | object[] }): ReactElement {
+  const items = Array.isArray(data) ? data : [data]
+  return (
+    <>
+      {items.map((item, index) => (
+        <script
+          key={index}
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(item) }}
+        />
+      ))}
+    </>
+  )
+}

package/src/components/blog/MarkdownRenderer.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import remarkGfm from 'remark-gfm'
+import React, { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+import { cn } from '../../utils/cn'
+
+/**
+ * Themed markdown renderer for blog/article content.
+ *
+ * Uses shared design tokens (`text-foreground`, `border-border`, `bg-muted`,
+ * `text-primary`, …) so it adopts each app's theme automatically. Decoupled from
+ * `next-themes`: pass `theme="dark"` to switch the code-block syntax style (apps
+ * using next-themes can forward `useTheme().resolvedTheme`).
+ */
+export interface MarkdownRendererProps {
+  content: string
+  /** Syntax-highlighting style for fenced code blocks. Default `"light"`. */
+  theme?: 'light' | 'dark'
+  className?: string
+}
+
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+export function MarkdownRenderer({ content, theme = 'light', className }: MarkdownRendererProps) {
+  const [copiedCode, setCopiedCode] = useState<string | null>(null)
+
+  const copyToClipboard = async (code: string) => {
+    await navigator.clipboard.writeText(code)
+    setCopiedCode(code)
+    setTimeout(() => setCopiedCode(null), 2000)
+  }
+
+  return (
+    <div className={cn('prose prose-lg max-w-none', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // h1 in content renders as h2 — the page template owns the real <h1>.
+          h1: ({ children, ...props }) => (
+            <h2 id={slugify(String(children ?? ''))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
+              {children}
+            </h2>
+          ),
+          h2: ({ children, ...props }) => (
+            <h2 id={slugify(String(children ?? ''))} className="text-3xl font-heading font-semibold mb-4 mt-10 first:mt-0 text-foreground scroll-mt-8" {...props}>
+              {children}
+            </h2>
+          ),
+          h3: ({ children, ...props }) => (
+            <h3 id={slugify(String(children ?? ''))} className="text-2xl font-heading font-semibold mb-3 mt-8 first:mt-0 text-foreground scroll-mt-8" {...props}>
+              {children}
+            </h3>
+          ),
+          h4: ({ children, ...props }) => (
+            <h4 id={slugify(String(children ?? ''))} className="text-xl font-heading font-semibold mb-2 mt-6 first:mt-0 text-foreground scroll-mt-8" {...props}>
+              {children}
+            </h4>
+          ),
+          a: ({ children, ...props }) => (
+            <a className="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity" {...props}>
+              {children}
+            </a>
+          ),
+          code: (codeProps) => {
+            const { className: codeClassName, children, ...props } = codeProps as {
+              className?: string
+              children?: React.ReactNode
+            }
+            const match = /language-(\w+)/.exec(codeClassName || '')
+            const language = match ? match[1] : ''
+            const codeString = String(children).replace(/\n$/, '')
+
+            if (language) {
+              const syntaxStyle = theme === 'dark' ? oneDark : oneLight
+              return (
+                <div className="my-6 rounded-lg overflow-hidden border border-border shadow-sm">
+                  <div className="flex items-center justify-between bg-muted px-4 py-2 border-b border-border">
+                    <span className="text-sm font-medium text-muted-foreground">{language}</span>
+                    <button
+                      onClick={() => copyToClipboard(codeString)}
+                      className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors p-1 rounded"
+                      title="Copy code"
+                      aria-label={copiedCode === codeString ? 'Code copied' : 'Copy code to clipboard'}
+                    >
+                      {copiedCode === codeString ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+                    </button>
+                  </div>
+                  <SyntaxHighlighter
+                    style={syntaxStyle as Record<string, React.CSSProperties>}
+                    language={language}
+                    PreTag="div"
+                    customStyle={{ margin: 0, padding: '1rem', background: 'transparent', fontSize: '0.875rem', lineHeight: '1.5' }}
+                    codeTagProps={{
+                      style: {
+                        background: 'transparent',
+                        fontFamily:
+                          "ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+                      },
+                    }}
+                  >
+                    {codeString}
+                  </SyntaxHighlighter>
+                </div>
+              )
+            }
+
+            return (
+              <code className="bg-muted px-2 py-1 rounded text-sm font-mono text-foreground border border-border" {...props}>
+                {children}
+              </code>
+            )
+          },
+          table: ({ children, ...props }) => (
+            <div className="overflow-x-auto my-8">
+              <table className="w-full border-collapse bg-card rounded-lg border border-border shadow-sm" {...props}>
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children, ...props }) => (
+            <thead className="bg-muted" {...props}>
+              {children}
+            </thead>
+          ),
+          th: ({ children, ...props }) => (
+            <th className="px-4 py-3 text-left font-semibold border-b border-border text-foreground" {...props}>
+              {children}
+            </th>
+          ),
+          td: ({ children, ...props }) => (
+            <td className="px-4 py-3 border-b border-border text-foreground" {...props}>
+              {children}
+            </td>
+          ),
+          tr: ({ children, ...props }) => (
+            <tr className="hover:bg-muted/50" {...props}>
+              {children}
+            </tr>
+          ),
+          p: ({ children, ...props }) => (
+            <p className="mb-6 leading-relaxed text-foreground" {...props}>
+              {children}
+            </p>
+          ),
+          strong: ({ children, ...props }) => (
+            <strong className="font-semibold text-foreground" {...props}>
+              {children}
+            </strong>
+          ),
+          em: ({ children, ...props }) => (
+            <em className="italic text-foreground" {...props}>
+              {children}
+            </em>
+          ),
+          ul: ({ children, ...props }) => (
+            <ul className="mb-6 space-y-2 list-disc ml-6" {...props}>
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }) => (
+            <ol className="mb-6 space-y-2 list-decimal ml-6" {...props}>
+              {children}
+            </ol>
+          ),
+          li: ({ children, ...props }) => (
+            <li className="text-foreground leading-relaxed" {...props}>
+              {children}
+            </li>
+          ),
+          hr: ({ ...props }) => <hr className="my-8 border-border" {...props} />,
+          blockquote: ({ children, ...props }) => (
+            <blockquote className="my-6 pl-6 border-l-4 border-primary bg-muted py-4 pr-4 rounded-r-lg" {...props}>
+              <div className="text-muted-foreground italic">{children}</div>
+            </blockquote>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/src/components/blog/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @startsimpli/ui/blog — shared blog presentation layer.
+ *
+ * Themed React components + page-level composers for marketing-site blogs.
+ * Pair with the headless data layer in `@startsimpli/api/blog`
+ * (`createBlogClient`, `createStructuredData`, `buildBlogSitemapEntries`).
+ */
+
+export { JsonLd } from './JsonLd'
+export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer'
+export { ArticleCard, type ArticleCardProps } from './ArticleCard'
+export { BlogIndex, type BlogIndexProps } from './BlogIndex'
+export { BlogPost, type BlogPostProps } from './BlogPost'