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]>
This commit is contained in:
Claude Opus 5.5
@@ -1,72 +1,88 @@
|
||||
# Tailwind CSS UI
|
||||
# @moduletrace/twui
|
||||
|
||||
A modular skeletal framework for tailwind css
|
||||
A modular skeletal React component framework for Tailwind CSS v4.
|
||||
|
||||
## Perequisites
|
||||
## Install
|
||||
|
||||
You need a couple of packages and settings to integrate this package
|
||||
The package is published to the Moduletrace Gitea registry. Add this to your project's `.npmrc`:
|
||||
|
||||
### Packages
|
||||
```ini
|
||||
@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/
|
||||
```
|
||||
|
||||
- React
|
||||
- React Dom
|
||||
- Tailwind CSS **version 4**
|
||||
Then install the package with its required peers:
|
||||
|
||||
### CSS Base
|
||||
```sh
|
||||
bun add @moduletrace/twui react react-dom lucide-react tailwindcss
|
||||
```
|
||||
|
||||
This package contains a `base.css` file which has all the base css rules required to run. This css file must be imported in your base project, and it can be update in a separate `.css` file.
|
||||
### 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 "../path/to/twui/base.css";
|
||||
@import "@moduletrace/twui/base.css";
|
||||
|
||||
@theme inline {
|
||||
--breakpoint-xs: 350px;
|
||||
|
||||
--color-background-light: #ffffff;
|
||||
--color-foreground-light: #171717;
|
||||
--color-background-dark: #0c0e11;
|
||||
--color-foreground-dark: #ededed;
|
||||
|
||||
--color-primary: #e2b433;
|
||||
--color-primary-hover: #9e7503;
|
||||
--color-primary-outline: #29292b;
|
||||
--color-primary-text: #29292b;
|
||||
--color-primary-dark: #e2b433;
|
||||
--color-primary-dark-hover: #f7cc59;
|
||||
--color-primary-dark-outline: #e2b433;
|
||||
--color-primary-dark-text: #f7cc59;
|
||||
--color-secondary: #128b63;
|
||||
--color-secondary-hover: #128b63;
|
||||
--color-secondary-outline: #128b63;
|
||||
--color-secondary-text: #128b63;
|
||||
--color-secondary-dark: #128b63;
|
||||
--color-secondary-dark-hover: #128b63;
|
||||
--color-secondary-dark-outline: #128b63;
|
||||
--color-secondary-dark-text: #128b63;
|
||||
--color-accent: #000000;
|
||||
--color-accent-hover: #dddddd;
|
||||
--color-accent-outline: #dddddd;
|
||||
--color-accent-text: #dddddd;
|
||||
--color-accent-dark: #000000;
|
||||
--color-accent-dark-hover: #dddddd;
|
||||
--color-accent-dark-outline: #dddddd;
|
||||
--color-accent-dark-text: #dddddd;
|
||||
|
||||
--color-price: #16946a;
|
||||
--color-price-dark: #77ceb1;
|
||||
/* ...see base.css for the full list of tokens */
|
||||
}
|
||||
|
||||
.styles {
|
||||
@apply text-sm;
|
||||
.twui-button-general {
|
||||
@apply rounded-full;
|
||||
}
|
||||
```
|
||||
|
||||
### Install packages
|
||||
## Usage
|
||||
|
||||
```sh
|
||||
bun add lucide-react tailwind-merge html-to-react gray-matter mdx typescript lodash react-code-blocks react-responsive-modal next-mdx-remote remark-gfm rehype-prism-plus openai
|
||||
Import from the root entry:
|
||||
|
||||
```tsx
|
||||
import { Button, Stack, Row, useStatus } from "@moduletrace/twui";
|
||||
```
|
||||
|
||||
```sh
|
||||
bun add -D @types/ace @types/react @types/react-dom tailwindcss @types/mdx @next/mdx
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user