@deweyou-design/react

Reusable UI components for Deweyou Design.

Installation

npm install @deweyou-design/react @deweyou-design/styles

Import the theme stylesheet once at your app root:

import '@deweyou-design/styles/theme.css';

Components

Every public component supports root import and a documented subpath import. The full import matrix, composition trees, and accessibility contracts live in docs/design/components.md.

Prefer subpath imports for better tree-shaking; use the root @deweyou-design/react import when consuming multiple components together.

Core coverage: Button, IconButton, Field, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Dialog, Menu, Popover, Tooltip, Toast, Tabs, Pagination, Breadcrumb, Nav, NavOverlay, ScrollArea, ImagePreview, ImageMasonry, VirtualMasonry, GroupedVirtualMasonry, CodeBlock, MarkdownRender, MermaidRender, MindmapRender, Text, Badge, Card, Separator, Skeleton, and Spinner.

Button

The shared action primitive. Supports filled, outlined, ghost, and link variants.

Props

• variant: 'filled' | 'outlined' | 'ghost' | 'link' — defaults to filled
• color: 'neutral' | 'primary' | 'danger' — defaults to neutral
• size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' — defaults to md
• shape: 'rect' | 'float' | 'pill' — only for filled and outlined, defaults to float
• icon: leading graphic slot for mixed-content usage
• href: renders an <a> root when present
• target: only valid with href
• htmlType: alias for the native button type attribute
• loading: shows a spinner, blocks activation, adds aria-busy
• disabled: native disabled state

Button.Icon (alias of IconButton) is the explicit square icon-button entry.

Usage

import { Button, IconButton } from '@deweyou-design/react/button';

<Button>Default</Button>
<Button variant="outlined" color="primary" shape="pill">Primary</Button>
<Button color="danger" loading>Delete</Button>
<Button href="/docs" target="_blank" variant="ghost">Docs</Button>
<IconButton aria-label="Search" icon={<SearchIcon />} variant="outlined" />
<Button.Icon aria-label="Add" icon={<AddIcon />} />

Text

The shared typography primitive. Organized around variant, emphasis toggles, palette-backed color / background, and lineClamp.

Props

• variant: 'plain' | 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' — defaults to plain
• italic, bold, underline, strikethrough: composable emphasis toggles
• color: one of 26 text color families (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive)
• background: same 26 families, mapped to highlight shades
• lineClamp: positive integer for maximum line count

Usage

import { Text } from '@deweyou-design/react/text';

<Text>Inline text</Text>
<Text variant="body">Body paragraph</Text>
<Text variant="h2">Heading</Text>
<Text bold underline color="blue">Emphasized</Text>
<Text background="amber" color="amber" lineClamp={2} variant="body">
  Highlighted and clamped.
</Text>

MarkdownRender

The shared CommonMark plus GFM rendering primitive for safe runtime Markdown strings.

Usage

import { MarkdownRender } from '@deweyou-design/react/markdown-render';

<MarkdownRender value={content} size="md" />;

<MarkdownRender
  value={content}
  onLinkClick={({ href, index, text }) => {
    trackLinkClick({ href, index, text });
  }}
  onCopy={({ text }) => {
    trackCopy(text);
  }}
/>;

<MarkdownRender
  value={content}
  resolveNodeAttributes={({ index, node, text }) =>
    node.startsWith('h') ? { id: `${node}-${slugify(text)}-${index}` } : undefined
  }
/>;

<MarkdownRender value={content} components={{ a: CustomLink, pre: CodeBlock }} />;

Use onLinkClick and onCopy for light interaction hooks without changing default browser behavior; call event.preventDefault() inside the callback when a surface needs to own navigation. Use resolveNodeAttributes to attach light DOM attributes such as heading anchors, aria-*, or data-* without replacing the rendered node. Its index is the zero-based occurrence count for the current Markdown node type, so repeated headings can still produce stable ids. Use components to replace Markdown nodes such as links or code blocks. Fenced code blocks with a language are syntax-highlighted by default and show a compact language tag. Tables and code blocks use default max-height guards with scrolling; override --markdown-table-max-height or --markdown-code-max-height from className when a surface needs a different limit. Use [data-markdown-node] selectors for small visual adjustments; keep MDX and executable content in a separate renderer.

MermaidRender

The shared read-only Mermaid diagram primitive for Markdown extension surfaces.

Usage

import { MermaidRender } from '@deweyou-design/react/mermaid-render';

<MermaidRender value={diagram} />;

MermaidRender routes supported diagrams through beautiful-mermaid, renders mindmap diagrams through the Deweyou SVG MindmapRender, and falls back to native Mermaid for other syntax. MarkdownRender keeps Mermaid opt-in through components overrides.

CodeBlock

The shared scrollable code-block primitive. MarkdownRender uses it for fenced code, and product surfaces should use it for standalone snippets so code samples keep one visual system.

Usage

import { CodeBlock } from '@deweyou-design/react/code-block';

<CodeBlock copy language="tsx" onCopy={({ text }) => console.log(text)}>
  {`const value = "Deweyou";`}
</CodeBlock>;
<CodeBlock size="sm">npm i @deweyou-design/react</CodeBlock>;

language accepts the common code ids such as ts, tsx, js, jsx, json, css, html, bash, markdown, and still allows custom strings for less common renderers. Set copy to show the top-right copy icon button; onCopy runs after the Clipboard API receives the plain code text.

Popover

The shared non-modal floating-content primitive. Anchors a panel to one trigger element.

Props

• content: required floating panel content
• trigger: 'click' | 'hover' | 'focus' | 'context-menu' or an array — defaults to click
• placement: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom'
• visible / defaultVisible / onVisibleChange: controlled or uncontrolled open state
• mode: 'card' | 'loose' | 'pure' — defaults to card
• shape: 'rect' | 'rounded' — defaults to rounded
• offset: gap between trigger and panel — defaults to 8
• boundaryPadding: safe distance from viewport — defaults to 16
• popupPortalContainer: custom portal parent
• disabled: blocks all opening paths

Usage

import { Button } from '@deweyou-design/react/button';
import { Popover } from '@deweyou-design/react/popover';

<Popover content={<div>Panel content</div>} placement="bottom">
  <Button>Open</Button>
</Popover>

<Popover content={<div style={{ padding: 12 }}>Pure</div>} mode="pure" trigger={['click', 'focus']}>
  <Button variant="outlined">Open</Button>
</Popover>

Menu

The shared dropdown menu primitive.

Exports

Menu, MenuTrigger, MenuContent, MenuItem, MenuGroup, MenuGroupLabel, MenuSeparator, MenuTriggerItem, MenuRadioGroup, MenuRadioItem, MenuCheckboxItem, ContextMenu

Usage

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from '@deweyou-design/react/menu';
import { Button } from '@deweyou-design/react/button';

<Menu>
  <MenuTrigger asChild>
    <Button>Actions</Button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem id="edit">Edit</MenuItem>
    <MenuItem id="copy">Copy</MenuItem>
    <MenuSeparator />
    <MenuItem id="delete">Delete</MenuItem>
  </MenuContent>
</Menu>;

Tabs

The shared tab navigation primitive, with overflow modes and animated indicator.

Exports

Tabs, TabList, TabTrigger, TabContent, TabIndicator

Usage

import { TabContent, TabIndicator, TabList, TabTrigger, Tabs } from '@deweyou-design/react/tabs';

<Tabs defaultValue="overview">
  <TabList>
    <TabTrigger value="overview">Overview</TabTrigger>
    <TabTrigger value="details">Details</TabTrigger>
    <TabIndicator />
  </TabList>
  <TabContent value="overview">Overview content</TabContent>
  <TabContent value="details">Details content</TabContent>
</Tabs>;

Theme Contract

• Import @deweyou-design/styles/theme.css explicitly in each consuming app.
• Button primary / danger / focus and Text color / background reuse governed tokens from @deweyou-design/styles.

License

MIT