react-lib-tools 0.0.19 → 0.0.21
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 +48 -0
- package/dist/index-D1Hn63kY.js.map +1 -1
- package/dist/index-DleNtYr0.cjs.map +1 -1
- package/dist/react-lib-tools.d.ts +3 -0
- package/package.json +1 -1
- package/scripts/compile-docs.ts +23 -4
- package/scripts/compile-examples.ts +22 -5
- package/scripts/utils/docs/compileComponents.ts +3 -3
- package/scripts/utils/docs/compileImperativeHandles.ts +3 -3
- package/scripts/utils/docs/parseDescription.ts +3 -1
- package/scripts/utils/initialize.ts +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# react-lib-tools
|
|
2
|
+
|
|
3
|
+
Tools for creating documentation for React component libraries. Used by packages like `react-window`, `react-resizable-panels`, and others.
|
|
4
|
+
|
|
5
|
+
## Compiling docs and examples
|
|
6
|
+
|
|
7
|
+
TSDoc comments can be compiled into a formatted structure using the compile-docs script:
|
|
8
|
+
```ts
|
|
9
|
+
import { compileDocs } from "react-lib-tools/scripts/compile-docs.ts";
|
|
10
|
+
|
|
11
|
+
await compileDocs({
|
|
12
|
+
componentNames: ["ComponentOne", "ComponentTwo"],
|
|
13
|
+
imperativeHandleNames: ["ImperativeHandleOne"]
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Example snippets can be compiled into syntax-highlighted HTML using the compile-examples script:
|
|
19
|
+
```ts
|
|
20
|
+
import { compileExamples } from "react-lib-tools/scripts/compile-examples.ts";
|
|
21
|
+
|
|
22
|
+
await compileExamples();
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Rendering docs and examples
|
|
26
|
+
|
|
27
|
+
The recommended way to render documentation generated by this app is to use `AppRoot` component:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { AppRoot, NavLink } from "react-lib-tools";
|
|
31
|
+
|
|
32
|
+
<AppRoot
|
|
33
|
+
navLinks={
|
|
34
|
+
<>
|
|
35
|
+
<NavLink path="/">Getting started</NavLink>
|
|
36
|
+
{/* Other links... */}
|
|
37
|
+
</>
|
|
38
|
+
}
|
|
39
|
+
packageDescription="some short description"
|
|
40
|
+
packageName="your-package-name"
|
|
41
|
+
routes={routes}
|
|
42
|
+
/>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Refer to that component's documentation for more advanced options.
|
|
46
|
+
|
|
47
|
+
> [!NOTE]
|
|
48
|
+
> The components in this project require Tailwind CSS to display properly.
|