tbenandClaude Opus 5.5
11da9b89e7
- 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]>
89 lines
2.8 KiB
Markdown
89 lines
2.8 KiB
Markdown
# @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`:
|
|
|
|
```ini
|
|
@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/
|
|
```
|
|
|
|
Then install the package with its required peers:
|
|
|
|
```sh
|
|
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:
|
|
|
|
```css
|
|
@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:
|
|
|
|
```tsx
|
|
import { Button, Stack, Row, useStatus } from "@moduletrace/twui";
|
|
```
|
|
|
|
Or use deep imports, which mirror the source folder layout:
|
|
|
|
```tsx
|
|
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
|
|
|
|
```sh
|
|
bun install
|
|
bun run typecheck
|
|
bun test src
|
|
bun run compile # tsc → dist/, then scripts/post-compile.ts
|
|
```
|
|
|
|
### Publishing
|
|
|
|
```sh
|
|
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.
|