@poveste/plugin-react 0.19.0 → 0.20.0
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 +38 -0
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -4,4 +4,42 @@
|
|
|
4
4
|
|
|
5
5
|
Requires Node `>=22.22.2`, `react@^19.0.0` and `react-dom@^19.0.0`, with a JSX transform such as `@vitejs/plugin-react` in your Vite config. See the [React guide](https://poveste.dev/guide/react/getting-started).
|
|
6
6
|
|
|
7
|
+
## Get started
|
|
8
|
+
|
|
9
|
+
```shell
|
|
10
|
+
pnpm i -D poveste @poveste/plugin-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Keep `@vitejs/plugin-react` in your `vite.config.ts`, then add the plugin:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
// poveste.config.ts
|
|
17
|
+
import { HstReact } from '@poveste/plugin-react'
|
|
18
|
+
import { defineConfig } from 'poveste'
|
|
19
|
+
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
plugins: [HstReact()],
|
|
22
|
+
})
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
A story is a `.story.tsx` file whose default export describes it, and each variant has a `render` that returns JSX:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
// src/Badge.story.tsx
|
|
29
|
+
import { defineStory } from '@poveste/plugin-react'
|
|
30
|
+
import { Badge } from './Badge'
|
|
31
|
+
|
|
32
|
+
export default defineStory({
|
|
33
|
+
title: 'Badge',
|
|
34
|
+
variants: [
|
|
35
|
+
{ title: 'Info', render: () => <Badge tone="info">Information</Badge> },
|
|
36
|
+
{ title: 'Warning', render: () => <Badge tone="warn">Careful</Badge> },
|
|
37
|
+
],
|
|
38
|
+
})
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`Badge` stands in for a component of your own. `npx poveste dev` then starts the book. The [React guide](https://poveste.dev/guide/react/getting-started) covers state, setup files and wrappers.
|
|
42
|
+
|
|
43
|
+
## What it does
|
|
44
|
+
|
|
7
45
|
This first version renders stories and variants. The source panel shows the story file. The controls panel is not wired to React: a variant with `initState` gets the generic state editor, and one without says why there is nothing there.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poveste/plugin-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.20.0",
|
|
5
5
|
"description": "Poveste plugin for React support, renderer only",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Sorin Gitlan",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"@vitejs/plugin-react": "^6.0.0",
|
|
61
|
-
"poveste": "^0.
|
|
61
|
+
"poveste": "^0.20.0",
|
|
62
62
|
"react": "^19.0.0",
|
|
63
63
|
"react-dom": "^19.0.0"
|
|
64
64
|
},
|
|
@@ -68,21 +68,21 @@
|
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@poveste/shared": "^0.
|
|
72
|
-
"@poveste/vendors": "^0.
|
|
71
|
+
"@poveste/shared": "^0.20.0",
|
|
72
|
+
"@poveste/vendors": "^0.20.0"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
|
-
"@types/node": "^26.6.
|
|
75
|
+
"@types/node": "^26.6.5",
|
|
76
76
|
"@types/react": "^19.3.0",
|
|
77
77
|
"@types/react-dom": "^19.3.0",
|
|
78
|
-
"@vitejs/plugin-react": "^6.1.
|
|
79
|
-
"jsdom": "^30.1.
|
|
80
|
-
"poveste": "0.
|
|
78
|
+
"@vitejs/plugin-react": "^6.1.2",
|
|
79
|
+
"jsdom": "^30.1.2",
|
|
80
|
+
"poveste": "0.20.0",
|
|
81
81
|
"react": "^19.3.0",
|
|
82
82
|
"react-dom": "^19.3.0",
|
|
83
83
|
"typescript": "6.0.3",
|
|
84
|
-
"vite": "^8.3.
|
|
85
|
-
"vitest": "^5.0.
|
|
84
|
+
"vite": "^8.3.4",
|
|
85
|
+
"vitest": "^5.0.4"
|
|
86
86
|
},
|
|
87
87
|
"scripts": {
|
|
88
88
|
"build": "rimraf dist && tsc -d",
|