@startupjs-ui/docs 0.1.12 → 0.1.16
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/CHANGELOG.md +16 -0
- package/README.md +46 -8
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/docs
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/docs
|
package/README.md
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
# startupjs
|
|
2
|
-
> MDX Documentation generator
|
|
1
|
+
# @startupjs-ui/docs
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
> MDX documentation generator
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
## TODO
|
|
6
|
+
|
|
7
|
+
- Currently only the `Sandbox` and `Props` components are usable. The full docs app still needs to be updated to work with the new Expo project structure and the new `startupjs-ui` components.
|
|
7
8
|
|
|
8
9
|
## Prerequisites
|
|
9
10
|
|
|
10
11
|
You must be using `@startupjs/app` for routing.
|
|
11
12
|
|
|
12
|
-
You can create a new application with the routing system using the `routing` template:
|
|
13
|
+
You can create a new application with the routing system using the `routing` template:
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npx startupjs init myapp -t routing
|
|
17
|
+
```
|
|
13
18
|
|
|
14
19
|
## Installation
|
|
15
20
|
|
|
@@ -27,9 +32,42 @@ startupjs: >= 0.33.0
|
|
|
27
32
|
|
|
28
33
|
## Usage
|
|
29
34
|
|
|
30
|
-
|
|
35
|
+
Currently this package exports two components:
|
|
36
|
+
|
|
37
|
+
- **`Sandbox`** -- an interactive playground that renders a component with editable props. It reads a JSON schema generated from the component's TypeScript interface and builds a prop editor UI automatically.
|
|
38
|
+
- **`Props`** -- the lower-level component used by Sandbox to render the prop editor and component preview.
|
|
39
|
+
|
|
40
|
+
### Sandbox
|
|
41
|
+
|
|
42
|
+
Import the `Sandbox` component and the auto-generated `_PropsJsonSchema` from your component file:
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
import { Sandbox } from '@startupjs-ui/docs'
|
|
46
|
+
import MyComponent, { _PropsJsonSchema as MyComponentPropsJsonSchema } from './MyComponent'
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Then use it in your MDX documentation:
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
<Sandbox
|
|
53
|
+
Component={MyComponent}
|
|
54
|
+
propsJsonSchema={MyComponentPropsJsonSchema}
|
|
55
|
+
/>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
For the JSON schema generation to work, your component file must:
|
|
59
|
+
|
|
60
|
+
1. Export a magic constant: `export const _PropsJsonSchema = {/* MyComponentProps */}`
|
|
61
|
+
2. Export a TypeScript interface for the component props: `export interface MyComponentProps { ... }`
|
|
62
|
+
3. Have `babel-preset-startupjs` configured with the `docgen: true` option to transform the TS interface into a JSON schema at build time.
|
|
63
|
+
|
|
64
|
+
### Full docs app (not yet available)
|
|
65
|
+
|
|
66
|
+
The full documentation app with sidebar navigation, language switching, and MDX page rendering is not yet available in this version. The setup below is preserved for reference and will work once the docs app is updated.
|
|
67
|
+
|
|
68
|
+
1. Create a `docs/` folder in your project root.
|
|
31
69
|
|
|
32
|
-
2. Create `docs/index.js` file with the following content:
|
|
70
|
+
2. Create a `docs/index.js` file with the following content:
|
|
33
71
|
```js
|
|
34
72
|
import docs from '@startupjs-ui/docs'
|
|
35
73
|
export default docs({
|
|
@@ -83,7 +121,7 @@ startupjs: >= 0.33.0
|
|
|
83
121
|
})
|
|
84
122
|
```
|
|
85
123
|
|
|
86
|
-
3. Add client-side `docs` app to your `Root/App.js` file:
|
|
124
|
+
3. Add the client-side `docs` app to your `Root/App.js` file:
|
|
87
125
|
|
|
88
126
|
```js
|
|
89
127
|
import docs from '../docs'
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/docs",
|
|
3
3
|
"description": "MDX documentation generator",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.16",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
9
|
"main": "index.js",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@fortawesome/free-solid-svg-icons": "^
|
|
12
|
-
"@startupjs-ui/alert": "^0.1.
|
|
13
|
-
"@startupjs-ui/br": "^0.1.
|
|
14
|
-
"@startupjs-ui/button": "^0.1.
|
|
11
|
+
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
12
|
+
"@startupjs-ui/alert": "^0.1.16",
|
|
13
|
+
"@startupjs-ui/br": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/button": "^0.1.16",
|
|
15
15
|
"@startupjs-ui/core": "^0.1.11",
|
|
16
|
-
"@startupjs-ui/div": "^0.1.
|
|
17
|
-
"@startupjs-ui/input": "^0.1.
|
|
18
|
-
"@startupjs-ui/scroll-view": "^0.1.
|
|
19
|
-
"@startupjs-ui/span": "^0.1.
|
|
20
|
-
"@startupjs-ui/tag": "^0.1.
|
|
16
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
17
|
+
"@startupjs-ui/input": "^0.1.16",
|
|
18
|
+
"@startupjs-ui/scroll-view": "^0.1.16",
|
|
19
|
+
"@startupjs-ui/span": "^0.1.16",
|
|
20
|
+
"@startupjs-ui/tag": "^0.1.16",
|
|
21
21
|
"lodash": "^4.17.20"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"react-native": "*",
|
|
26
26
|
"startupjs": "*"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
29
29
|
}
|