Files

T

tbenandClaude Opus 5.5 11da9b89e7 Package library as @moduletrace/twui npm package

- Move components/ to src/ and compile to dist/ with tsc
- Add root barrel export plus deep-import subpath exports and base.css export
- Post-compile step: copy base.css, add .js import extensions, mark client modules
- Add publish.sh and .npmrc for the Gitea npm registry
- Fix type errors, guard TinyMCE env access, drop ace-builds type dependency
- Rename clashing props type names, remove Next.js scaffolding and unused deps

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2026-10-18 10:17:54 +01:00

2.8 KiB

Raw Blame History

@moduletrace/twui

A modular skeletal React component framework for Tailwind CSS v4.

Install

The package is published to the Moduletrace Gitea registry. Add this to your project's .npmrc:

@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/

Then install the package with its required peers:

bun add @moduletrace/twui react react-dom lucide-react tailwindcss

Optional peers

Only install these if you use the matching components:

Feature	Packages
`editors/AceEditor`	`ace-builds`
`elements/RemoteCodeBlock`, `mdx/markdown/*`	`next-mdx-remote`, `remark-gfm`, `rehype-prism-plus`
`mdx/mdx-components`, `next-js/hooks/useMDXComponents`	`@types/mdx` (dev)
`elements/ai/*`	`openai` (types), `react-markdown`

editors/TinyMCE loads TinyMCE from a URL at runtime. Set it with the base_url prop, or with the NEXT_PUBLIC_TINYMCE_BASE_URL / BUNEXT_PUBLIC_TINYMCE_BASE_URL public env vars.

CSS

Import base.css once in your main stylesheet. It includes @import "tailwindcss", the default theme tokens, and an @source rule so Tailwind generates the classes the components use. Override tokens in your own @theme inline block:

@import "@moduletrace/twui/base.css";

@theme inline {
    --color-primary: #e2b433;
    --color-primary-hover: #9e7503;
    --color-primary-dark: #e2b433;
    --color-primary-dark-hover: #f7cc59;
    /* ...see base.css for the full list of tokens */
}

.twui-button-general {
    @apply rounded-full;
}

Usage

Import from the root entry:

import { Button, Stack, Row, useStatus } from "@moduletrace/twui";

Or use deep imports, which mirror the source folder layout:

import Button from "@moduletrace/twui/layout/Button";
import Input from "@moduletrace/twui/form/Input";
import TinyMCEEditor from "@moduletrace/twui/editors/TinyMCE";

Editors, MDX, Next.js helpers, the AI blocks and RemoteCodeBlock are deep-import only, so the root entry never pulls in optional peers.

Component modules are marked "use client", so they work in the Next.js App Router.

Development

bun install
bun run typecheck
bun test src
bun run compile   # tsc → dist/, then scripts/post-compile.ts

Publishing

export GITBEN_NPM_TOKEN=...
./publish.sh "Commit message"

publish.sh typechecks, tests, compiles, commits, pushes, and runs bun publish. Bump version in package.json first.

2.8 KiB Raw Blame History