@yeonpm/docs-template

@yeonpm/docs-template

A reusable document-style layout and card component library for React.

Provides a full-featured Shell (header + side navigation + main content area), a versatile CommonCard, a slide-in Drawer panel, a multi-format Citation Modal, and a ready-to-use DocsGuide page — everything you need to build portfolio / CV / documentation sites quickly.

Installation

npm install @yeonpm/docs-template

Peer Dependencies

The following packages must be installed in your project:

npm install @yeonpm/react @emotion/react @emotion/styled react-icons zustand

Components

Component	Description
CommonizeShell	Top-level layout combining Header + SideNav + main content area
CommonizeHeader	Fixed top header with brand title, right slot, and mobile hamburger menu
CommonizeSideNav	Desktop fixed / mobile drawer side navigation
CommonCard	Multi-purpose card supporting title, image, author, citation, link, and various click actions
CommonizeDrawer	Right slide-in detail panel powered by Zustand
CardWrapper	Card wrapper with mouse-tracking hover glow effect
CitationModal	Academic citation modal with MLA / APA / Chicago / Harvard / Vancouver formats
DocsGuide	Ready-to-use full guide page showcasing all components

DocsGuide — One-Line Demo Page

The fastest way to see all components in action. Import DocsGuide and render it — that's it.

"use client";

import { DocsGuide } from "@yeonpm/docs-template";

export default function Page() {
  return <DocsGuide version="0.3.0" />;
}

Prop	Type	Default	Description
version	string	"latest"	Version string displayed in the header

Deploy with Next.js

An example Next.js project is included in the example/ directory. To deploy:

cd example
npm install
npm run build   # or deploy to Vercel with Root Directory set to "example"

Quick Start

import {
  CommonizeShell,
  CommonCard,
  CommonizeDrawer,
  useCommonizeDrawerStore,
} from "@yeonpm/docs-template";

function App() {
  const { open } = useCommonizeDrawerStore();

  return (
    <CommonizeShell
      brand={{ title: "My Docs", subtitle: "v1.0" }}
      navItems={[
        { key: "intro", label: "Introduction", target: { type: "hash", id: "intro" } },
        { key: "api", label: "API Reference", target: { type: "hash", id: "api" } },
        { key: "github", label: "GitHub", target: { type: "external", href: "https://github.com" } },
      ]}
    >
      <section id="intro">
        <CommonCard
          title="Getting Started"
          description="Learn how to use this library."
          onClickAsDrawer={() =>
            open({
              panelTitle: "Getting Started",
              body: <p>Detailed walkthrough content goes here...</p>,
            })
          }
        />
      </section>
      <CommonizeDrawer />
    </CommonizeShell>
  );
}

Font Recommendation

All components use font-family: inherit, so they follow whatever font is set on your app's root element. We recommend setting a font on body:

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

API Reference

<CommonizeShell />

Top-level layout shell that combines header, side navigation, and main content.

Prop	Type	Description
brand	CommonizeBrand	Brand info displayed in the header
navItems	CommonizeNavItem[]	Navigation items for the side nav
children	React.ReactNode	Main content
headerRightSlot	React.ReactNode	Optional right-side header slot
navBottomSlot	React.ReactNode	Optional bottom-side slot in the side nav

<CommonizeHeader />

Fixed top header bar.

Prop	Type	Description
brand	CommonizeBrand	{ title, subtitle?, onClick? }
rightSlot	React.ReactNode	Right-side slot content
onHamburgerClick	() => void	Hamburger menu click handler (mobile)

<CommonizeSideNav />

Desktop: fixed side navigation. Mobile (≤768px): overlay drawer.

Prop	Type	Default	Description
items	CommonizeNavItem[]	—	Navigation items
bottomSlot	React.ReactNode	—	Bottom slot
width	number	220	Nav width in pixels
headerOffset	number	64	Header height offset

<CommonCard />

Versatile card component used across Education, Publications, Honors, Experience sections, etc.

Prop	Type	Description
title	ReactTextLike	Card title (string or ReactElement)
subTitle	ReactTextLike	Subtitle
description	ReactTextLike	Description text
author	CommonCardAuthor	Author — plain string or { value, isMain? }[]
period	ReactTextLike	Period / date range
extra	React.ReactNode	Extra content below the main body
image	CommonCardImage	{ src, alt?, href?, size? }
linkButton	CommonCardLinkButton	{ label?, href } — external link icon
citation	CommonCardCitation	Citation data — opens CitationModal on quote icon click
css	string	CSS override for internal class selectors
onClick	(e) => void	Direct click handler
hoverable	boolean	Enable hover glow effect
padding	number	Card padding (default 16)
className	string	Additional CSS class
onClickAsNewTab	string | (e) => void	Open URL or run custom logic in a new tab
onClickAsPopup	string | (e) => void	Open URL or run custom logic in a popup window
onClickAsDrawer	(e) => void	Open a drawer panel

Click priority: onClick → onClickAsDrawer → onClickAsPopup → onClickAsNewTab → linkButton.href

<CommonizeDrawer />

Right-side slide-in detail panel. Controlled via useCommonizeDrawerStore.

const { open, close, isOpen, content } = useCommonizeDrawerStore();

// Open the drawer
open({
  panelTitle: "Detail Title",
  subtitle: "Optional subtitle",
  body: <div>Any React content</div>,
});

// Close the drawer
close();

<CardWrapper />

A card container with rounded corners, border, shadow, and an optional mouse-tracking radial glow hover effect.

Prop	Type	Default	Description
children	React.ReactNode	—	Card content
padding	number	16	Inner padding
className	string	—	Additional CSS class
hoverable	boolean	false	Enable hover glow effect
onClick	(e) => void	—	Click handler

<CitationModal />

Dialog for displaying academic citations in 5 formats (MLA, APA, Chicago, Harvard, Vancouver). Supports loading citation data from a CSV file or auto-generating from publication metadata.

Prop	Type	Description
open	boolean	Modal open state
onClose	() => void	Close handler
publication	Publication | null	{ title, authors, journal, year, doi?, citationCsv? }

<DocsGuide />

A pre-built, ready-to-render guide page that demonstrates all components in the library. Includes interactive examples with "View Code" cards and section anchor links.

Prop	Type	Default	Description
version	string	"latest"	Version label shown in the header

Types

All types are available as named exports:

import type {
  ReactTextLike,
  CommonizeNavTarget,
  CommonizeNavItem,
  CommonizeBrand,
  CommonCardAuthor,
  CommonCardImage,
  CommonCardCitation,
  CommonCardLinkButton,
  CommonCardProps,
  CommonizeDrawerContent,
  DocsGuideProps,
} from "@yeonpm/docs-template";

Navigation Target Types

type CommonizeNavTarget =
  | { type: "hash"; id: string; path?: string }  // Scroll to #id
  | { type: "route"; href: string }               // Client-side navigation
  | { type: "external"; href: string };            // Open in new tab

Utilities

import { openExternal, navigateToHash, handleNavTarget } from "@yeonpm/docs-template";

openExternal("https://github.com");         // window.open in new tab
navigateToHash("section-id");               // Smooth scroll to #section-id
handleNavTarget({ type: "hash", id: "api" }); // Handles all nav target types

License

MIT