Convert app into @modernsk/ui component library package
- Add library entry (src/index.ts) re-exporting all components, theme, and TooltipProvider - Add shippable stylesheet (src/styles/index.css): tokens + components only, font inlined as base64 at build time - Build with tsup (ESM + CJS + .d.ts) and esbuild for CSS - package.json: exports map, files, sideEffects, peerDependencies (react/react-dom), correct deps (radix-ui), prepare-on-install - Fix phantom dependency: declare radix-ui, drop unused @radix-ui/themes - Remove Storybook boilerplate, Tailwind/PostCSS (unused) - Keep App.tsx + Rsbuild as dev-only playground (not published) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
# @modernsk/ui
|
||||
|
||||
Tactile, dark-first React component library built on [Radix](https://www.radix-ui.com/) primitives.
|
||||
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
|
||||
|
||||
## Install
|
||||
|
||||
Git-hosted (pin to a tag):
|
||||
|
||||
```bash
|
||||
npm install github:YOUR_ORG/modernsk-ui#v0.1.0
|
||||
```
|
||||
|
||||
`react` and `react-dom` (>=18) are peer dependencies — your app provides them.
|
||||
The package builds itself on install via the `prepare` script.
|
||||
|
||||
## Usage
|
||||
|
||||
Import the stylesheet once at your app root, then use components anywhere:
|
||||
|
||||
```tsx
|
||||
import '@modernsk/ui/styles.css';
|
||||
import { ThemeProvider, TooltipProvider, Button, Card } from '@modernsk/ui';
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Card>
|
||||
<Button variant="primary">Click</Button>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- `ThemeProvider` manages dark/light via `data-theme` on `<html>` and persists to `localStorage`. Read it with `useTheme()`.
|
||||
- `TooltipProvider` must wrap any tree that uses `<Tooltip>`.
|
||||
- All visuals come from CSS custom properties in the shipped stylesheet; the self-hosted display font is inlined, so no extra asset hosting is needed.
|
||||
|
||||
## Develop
|
||||
|
||||
A live playground (every component on one page) runs via Rsbuild:
|
||||
|
||||
```bash
|
||||
npm run dev # playground at http://localhost:3000
|
||||
npm run build # build the publishable package into dist/
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## What ships
|
||||
|
||||
`npm publish` / git-install exposes only `dist/` — built ESM + CJS, `.d.ts` types, and `styles.css`. The playground (`src/App.tsx`, Rsbuild config) is dev-only and never published.
|
||||
Reference in New Issue
Block a user