create-middag-ui 0.1.0 → 0.1.4
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 +72 -0
- package/package.json +4 -3
- /package/{index.js → cli.js} +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# create-middag-ui
|
|
2
|
+
|
|
3
|
+
Bootstrap a [MIDDAG React UI](https://github.com/middag-io/middag-react) layer in your Moodle or WordPress plugin.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx create-middag-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Run from your plugin project root. The wizard:
|
|
12
|
+
|
|
13
|
+
1. **Auto-detects your host** — finds `version.php` (Moodle) or `wp-config.php` (WordPress)
|
|
14
|
+
2. **Scaffolds `ui/`** — creates `package.json`, `tsconfig.json`, Vite config, and `.npmrc`
|
|
15
|
+
3. **Generates a hello-world mock** — a working PageContract with a metric card and data table
|
|
16
|
+
|
|
17
|
+
Then install and run:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
cd ui
|
|
21
|
+
npm install
|
|
22
|
+
npm run dev:mock
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Your mock opens at `http://localhost:5174` (Moodle), `5175` (WordPress), or `5176` (Custom).
|
|
26
|
+
|
|
27
|
+
## What it creates
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
ui/
|
|
31
|
+
.npmrc # GitHub Packages registry for @middag-io scope
|
|
32
|
+
package.json # Dependencies and scripts
|
|
33
|
+
tsconfig.json # TypeScript config with path aliases
|
|
34
|
+
vite.mock.config.ts # Vite dev server config for mock build
|
|
35
|
+
src/ # Your components (empty, ready for custom blocks)
|
|
36
|
+
mock/
|
|
37
|
+
index.html # HTML entry point
|
|
38
|
+
main.tsx # React entry with registerDefaults() + ContractPage
|
|
39
|
+
hello-contract.ts # Example PageContract (metric card + data table)
|
|
40
|
+
tailwind.css # Tailwind CSS import
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## After setup
|
|
44
|
+
|
|
45
|
+
Once `@middag-io/react` is installed, more commands become available from inside `ui/`:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npx @middag-io/react doctor # Validate project setup
|
|
49
|
+
npx @middag-io/react dev # Start mock dev server
|
|
50
|
+
npx @middag-io/react add-block <t> # Scaffold a new block type
|
|
51
|
+
npx @middag-io/react upgrade # Check for updates
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Authentication
|
|
55
|
+
|
|
56
|
+
`@middag-io/react` is hosted on GitHub Packages. The wizard creates `.npmrc` with the registry, but you need to add your GitHub token:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
echo '//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN' >> ui/.npmrc
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Create a token at [github.com/settings/tokens](https://github.com/settings/tokens) with the `read:packages` scope.
|
|
63
|
+
|
|
64
|
+
## Documentation
|
|
65
|
+
|
|
66
|
+
- **[Live Demo](https://middag-react-mock.pages.dev)** — 24 screens showing all block types
|
|
67
|
+
- **[Full Documentation](https://docs.middag.io)** — Getting started, host guides, API reference
|
|
68
|
+
- **[GitHub](https://github.com/middag-io/middag-react)** — Source code and issues
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-middag-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
|
|
6
6
|
"bin": {
|
|
7
|
-
"create-middag-ui": "
|
|
7
|
+
"create-middag-ui": "cli.js"
|
|
8
8
|
},
|
|
9
9
|
"files": [
|
|
10
|
-
"
|
|
10
|
+
"cli.js",
|
|
11
|
+
"README.md"
|
|
11
12
|
],
|
|
12
13
|
"keywords": [
|
|
13
14
|
"middag",
|
/package/{index.js → cli.js}
RENAMED
|
File without changes
|