@nestjs-dash/design-system 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# @nestjs-dash/design-system
|
|
2
|
+
|
|
3
|
+
A [shadcn/ui](https://ui.shadcn.com/) + Tailwind CSS design system, plus the server-driven UI (SDUI) renderer that turns the JSON `SchemaNode`/`ChartSpec` trees produced by `@nestjs-dash/core` into React. This is the client-side rendering half of nestjs-dash's admin shell — `@nestjs-dash/nestjs` uses it for the built-in React SSR shell, but the components/renderer are usable standalone too.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @nestjs-dash/design-system react react-dom
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`react`/`react-dom` `^19.0.0` are peer dependencies.
|
|
12
|
+
|
|
13
|
+
## Subpath exports
|
|
14
|
+
|
|
15
|
+
This package publishes several entry points, not just the package root:
|
|
16
|
+
|
|
17
|
+
| Import | Contents |
|
|
18
|
+
|---|---|
|
|
19
|
+
| `@nestjs-dash/design-system` | Top-level renderer entry (`renderSchemaNode`, `SchemaForm`, `DataTable`, `ChartWidget`, `ThemeToggle`, …) |
|
|
20
|
+
| `@nestjs-dash/design-system/ui` | Shared Tailwind utility class-string tokens (`ui`, `btnClass`) for Nest SSR templates, without the SDUI renderer |
|
|
21
|
+
| `@nestjs-dash/design-system/components/*` | Individual components, importable one at a time |
|
|
22
|
+
| `@nestjs-dash/design-system/hooks/*` | React hooks |
|
|
23
|
+
| `@nestjs-dash/design-system/lib/*` | Utilities, including `cn` (class-name merge) |
|
|
24
|
+
| `@nestjs-dash/design-system/nestjs-dash.css` (alias `./styles.css`) | Compiled Tailwind stylesheet — import once at your app's root |
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { renderSchemaNode } from '@nestjs-dash/design-system';
|
|
30
|
+
import '@nestjs-dash/design-system/nestjs-dash.css';
|
|
31
|
+
|
|
32
|
+
// `node` is a `SchemaNode` (from @nestjs-dash/support) produced by an
|
|
33
|
+
// @nestjs-dash/core form/table builder and passed down as SSR props.
|
|
34
|
+
function Field({ node }: { node: SchemaNode }) {
|
|
35
|
+
return renderSchemaNode(node);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Notable renderers: `SchemaForm` (form field trees), `DataTable` (resource tables), `ChartWidget` (renders a `ChartSpec` from `@nestjs-dash/support` using Recharts), upload/repeater/rich-editor fields, and `ThemeToggle` for light/dark mode.
|
|
40
|
+
|
|
41
|
+
## Part of nestjs-dash
|
|
42
|
+
|
|
43
|
+
This package is one piece of [nestjs-dash](https://github.com/nestjs-dash/nestjs-dash), a NestJS-native admin framework. It depends only on `@nestjs-dash/support` for shared types — no coupling to `@nestjs-dash/core`'s server-side builders beyond the JSON shapes they agree on.
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
MIT
|