dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/react-poiesis (0.2.0)

Published 2026-05-28 07:21:47 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/react-poiesis@0.2.0
"@phoenix-tekhne/react-poiesis": "0.2.0"

About this package

@phoenix-tekhne/react-poiesis

Layout components for the Phoenix Tekhne Design System.

Overview

Poiesis (ποίησις - "creation/making" in Greek) provides layout and content editing components for building complex interfaces.

Components

Grid

Responsive grid system with 4/8/12 column layouts.

import { Grid } from "@phoenix-tekhne/react-poiesis";

<Grid columns={12} gap="lg">
  <div>Content</div>
</Grid>;

MarkdownEditor

Full-featured markdown editor with toolbar, emoji picker, and table insertion.

import { MarkdownEditor } from "@phoenix-tekhne/react-poiesis";

function Editor() {
  const [value, setValue] = useState("");

  return (
    <MarkdownEditor
      value={value}
      onChange={setValue}
      placeholder="Write your content..."
      showToolbar
      collapsibleToolbar
    />
  );
}

Features

  • Toolbar: Bold, italic, lists, links, code blocks, quotes
  • Emoji Picker: Quick emoji insertion with shortcuts
  • Table Insertion: Configurable table presets
  • Image Support: Custom image insertion handler
  • Collapsible: Optional collapsible toolbar

Installation

npm install @phoenix-tekhne/react-poiesis

Dependencies

  • emoji-picker-react - For emoji picker
  • @phoenix-tekhne/react-tupos - For Button component

For AI Agents: Quick Reference

When to Use This Package

Component Use Case Import
Grid Page/layout structure @phoenix-tekhne/react-poiesis
MarkdownEditor Content editing @phoenix-tekhne/react-poiesis

Component Selection Guide

// Page layout
<Grid columns={12} gap="lg">
  <GridItem span={8}>Main content</GridItem>
  <GridItem span={4}>Sidebar</GridItem>
</Grid>

// Content editing
<MarkdownEditor
  value={content}
  onChange={setContent}
  showToolbar
  collapsibleToolbar
/>

Key Files

File Pattern Purpose
src/Grid/ Grid layout system
src/MarkdownEditor/ Markdown editor

CSS Class Pattern

Components use the poiesis- prefix:

  • .poiesis-grid-container
  • .poiesis-grid-item

Documentation

Each component includes:

  • README.md - Usage documentation
  • *.stories.tsx - Storybook stories
  • *.test.tsx - Unit tests

Contributing

See AGENTS.md in repository root for contribution guidelines.

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Dependencies

ID Version
@phoenix-tekhne/pattern-core 0.2.0
@phoenix-tekhne/react-dynamis 2.5.1
@phoenix-tekhne/react-tupos 0.3.0
@phoenix-tekhne/tokens 0.3.0
dompurify ^3.4.3
emoji-picker-react ^4.18.0
marked ^15.0.0

Development Dependencies

ID Version
@types/dompurify ^3.2.0
@types/react ^19.2.14
@vitejs/plugin-react ^4.7.0
typescript ^5.0.0
vite ^5.0.0
vite-plugin-dts 4.5.4

Peer Dependencies

ID Version
react >=19.0.0
react-dom >=19.0.0
Details
npm
2026-05-28 07:21:47 -07:00
5
latest
40 KiB
Assets (1)
react-poiesis-0.2.0.tgz 40 KiB
Versions (1) View all
0.2.0 2026-05-28