@powerhousedao/academy 5.1.0-staging.0 → 5.1.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.
Files changed (76) hide show
  1. package/CHANGELOG.md +46 -1148
  2. package/blog/BeyondCommunication-ABlueprintForDevelopment.md +1 -2
  3. package/blog/TheChallengeOfChange.md +0 -1
  4. package/docs/academy/00-EthereumArgentinaHackathon.md +207 -0
  5. package/docs/academy/01-GetStarted/00-ExploreDemoPackage.mdx +27 -24
  6. package/docs/academy/01-GetStarted/01-CreateNewPowerhouseProject.md +10 -155
  7. package/docs/academy/01-GetStarted/02-DefineToDoListDocumentModel.md +35 -122
  8. package/docs/academy/01-GetStarted/03-ImplementOperationReducers.md +155 -178
  9. package/docs/academy/01-GetStarted/04-BuildToDoListEditor.md +218 -0
  10. package/docs/academy/{02-MasteryTrack/01-BuilderEnvironment → 01-GetStarted}/05-VetraStudio.md +22 -62
  11. package/docs/academy/01-GetStarted/06-ReactorMCP.md +58 -0
  12. package/docs/academy/01-GetStarted/_04-BuildToDoListEditor +1 -1
  13. package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/03-BuilderTools.md +2 -2
  14. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/02-SpecifyTheStateSchema.md +44 -75
  15. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/03-SpecifyDocumentOperations.md +22 -28
  16. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/04-UseTheDocumentModelGenerator.md +31 -28
  17. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/05-ImplementDocumentReducers.md +206 -211
  18. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/06-ImplementDocumentModelTests.md +62 -176
  19. package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/07-ExampleToDoListRepository.md +0 -21
  20. package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/01-BuildingDocumentEditors.md +319 -309
  21. package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/06-DocumentTools/00-DocumentToolbar.mdx +0 -4
  22. package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/06-DocumentTools/01-OperationHistory.md +0 -4
  23. package/docs/academy/02-MasteryTrack/05-Launch/04-ConfigureEnvironment.md +1 -1
  24. package/docs/academy/03-ExampleUsecases/Chatroom/02-CreateNewPowerhouseProject.md +35 -111
  25. package/docs/academy/03-ExampleUsecases/Chatroom/03-DefineChatroomDocumentModel.md +79 -195
  26. package/docs/academy/03-ExampleUsecases/Chatroom/04-ImplementOperationReducers.md +241 -435
  27. package/docs/academy/03-ExampleUsecases/Chatroom/05-ImplementChatroomEditor.md +27 -388
  28. package/docs/academy/03-ExampleUsecases/Chatroom/06-LaunchALocalReactor.md +7 -95
  29. package/docs/academy/03-ExampleUsecases/Chatroom/_category_.json +1 -1
  30. package/docs/academy/04-APIReferences/00-PowerhouseCLI.md +2 -6
  31. package/docs/academy/04-APIReferences/01-ReactHooks.md +501 -291
  32. package/docs/academy/05-Architecture/00-PowerhouseArchitecture.md +39 -7
  33. package/docs/academy/05-Architecture/02-ReferencingMonorepoPackages +65 -0
  34. package/docs/academy/05-Architecture/04-MovingBeyondCRUD +61 -0
  35. package/docs/academy/06-ComponentLibrary/00-DocumentEngineering.md +24 -72
  36. package/docs/academy/08-Glossary.md +0 -7
  37. package/docusaurus.config.ts +3 -28
  38. package/package.json +1 -1
  39. package/sidebars.ts +13 -49
  40. package/src/css/custom.css +18 -26
  41. package/docs/academy/01-GetStarted/04-WriteDocumentModelTests.md +0 -425
  42. package/docs/academy/01-GetStarted/05-BuildToDoListEditor.md +0 -557
  43. package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/images/Modules.png +0 -0
  44. package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/images/VetraStudioDrive.png +0 -0
  45. package/docs/academy/02-MasteryTrack/05-Launch/05-DockerDeployment.md +0 -384
  46. package/docs/academy/03-ExampleUsecases/TodoList/00-GetTheStarterCode.md +0 -24
  47. package/docs/academy/03-ExampleUsecases/TodoList/01-GenerateTodoListDocumentModel.md +0 -211
  48. package/docs/academy/03-ExampleUsecases/TodoList/02-ImplementTodoListDocumentModelReducerOperationHandlers.md +0 -171
  49. package/docs/academy/03-ExampleUsecases/TodoList/03-AddTestsForTodoListActions.md +0 -462
  50. package/docs/academy/03-ExampleUsecases/TodoList/04-GenerateTodoListDocumentEditor.md +0 -45
  51. package/docs/academy/03-ExampleUsecases/TodoList/05-ImplementTodoListDocumentEditorUIComponents.md +0 -422
  52. package/docs/academy/03-ExampleUsecases/TodoList/06-GenerateTodoDriveExplorer.md +0 -61
  53. package/docs/academy/03-ExampleUsecases/TodoList/07-AddSharedComponentForShowingTodoListStats.md +0 -384
  54. package/docs/academy/03-ExampleUsecases/TodoList/_category_.json +0 -8
  55. package/docs/academy/03-ExampleUsecases/VetraPackageLibrary/VetraPackageLibrary.md +0 -7
  56. package/docs/academy/03-ExampleUsecases/VetraPackageLibrary/_category_.json +0 -9
  57. package/docs/academy/04-APIReferences/06-VetraRemoteDrive.md +0 -160
  58. package/docs/academy/04-APIReferences/renown-sdk/00-Overview.md +0 -316
  59. package/docs/academy/04-APIReferences/renown-sdk/01-Authentication.md +0 -672
  60. package/docs/academy/04-APIReferences/renown-sdk/02-APIReference.md +0 -957
  61. package/docs/academy/04-APIReferences/renown-sdk/_category_.json +0 -8
  62. package/docs/academy/10-TodoListTutorial/02-ImplementTodoListDocumentModelReducerOperationHandlers.md +0 -171
  63. package/docs/academy/10-TodoListTutorial/03-AddTestsForTodoListActions.md +0 -462
  64. package/docs/academy/10-TodoListTutorial/05-ImplementTodoListDocumentEditorUIComponents.md +0 -422
  65. package/docs/academy/10-TodoListTutorial/07-AddSharedComponentForShowingTodoListStats.md +0 -370
  66. package/static/img/Vetra-logo-dark.svg +0 -11
  67. package/static/img/vetra-logo-light.svg +0 -11
  68. /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/06-DocumentTools/{02-RevisionHistoryTimeline/360/237/232/247" → 02-RevisionHistoryTimeline} +0 -0
  69. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /01-WhatIsADocumentModel" → 01-WhatIsADocumentModel} +0 -0
  70. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /02-DAOandDocumentsModelsQ+A" → 02-DAOandDocumentsModelsQ+A} +0 -0
  71. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /02-domain-modeling" → 02-domain-modeling} +0 -0
  72. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /03-BenefitsOfDocumentModels" → 03-BenefitsOfDocumentModels} +0 -0
  73. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /04-UtilitiesAndTips" → 04-UtilitiesAndTips} +0 -0
  74. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /05-best-practices" → 05-best-practices} +0 -0
  75. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /_category_.json" → _category_.json} +0 -0
  76. /package/docs/academy/05-Architecture/05-DocumentModelTheory/{360/237/232/247 /three-data-layers.png" → three-data-layers.png} +0 -0
@@ -1,384 +0,0 @@
1
- # Docker Deployment Guide
2
-
3
- ## Introduction
4
-
5
- Powerhouse provides official Docker images for deploying your applications in containerized environments. This guide covers the available Docker images, how to use them with Docker Compose, and the environment variables you can configure.
6
-
7
- Docker deployment is ideal for:
8
- - **Production environments** that require consistent, reproducible deployments
9
- - **Development teams** that want to share a common environment
10
- - **CI/CD pipelines** that need automated testing and deployment
11
- - **Cloud platforms** like AWS ECS, Google Cloud Run, or Kubernetes
12
-
13
- ## Available Docker Images
14
-
15
- Powerhouse publishes three official Docker images to the GitHub Container Registry (ghcr.io):
16
-
17
- ### 1. Connect
18
-
19
- The Connect image provides the Powerhouse web application frontend with an embedded Nginx server.
20
-
21
- ```
22
- ghcr.io/powerhouse-inc/powerhouse/connect
23
- ```
24
-
25
- **Available tags:**
26
- - `latest` - Latest stable release
27
- - `dev` - Development builds
28
- - `staging` - Staging builds
29
- - `vX.Y.Z` - Specific version tags (e.g., `v1.0.0`)
30
-
31
- ### 2. Switchboard
32
-
33
- The Switchboard image provides the backend API server that handles document synchronization and GraphQL endpoints.
34
-
35
- ```
36
- ghcr.io/powerhouse-inc/powerhouse/switchboard
37
- ```
38
-
39
- **Available tags:**
40
- - `latest` - Latest stable release
41
- - `dev` - Development builds
42
- - `staging` - Staging builds
43
- - `vX.Y.Z` - Specific version tags (e.g., `v1.0.0`)
44
-
45
- ### 3. Academy
46
-
47
- The Academy image provides the documentation website.
48
-
49
- ```
50
- ghcr.io/powerhouse-inc/powerhouse/academy
51
- ```
52
-
53
- **Available tags:**
54
- - `latest` - Latest stable release
55
- - `dev` - Development builds
56
- - `staging` - Staging builds
57
- - `vX.Y.Z` - Specific version tags (e.g., `v1.0.0`)
58
-
59
- ## Quick Start with Docker Compose
60
-
61
- The easiest way to run Powerhouse locally is using Docker Compose. Create a `docker-compose.yml` file or use the one provided in the repository:
62
-
63
- ```yaml
64
- name: powerhouse
65
-
66
- services:
67
- connect:
68
- image: ghcr.io/powerhouse-inc/powerhouse/connect:dev
69
- environment:
70
- - DATABASE_URL=postgres://postgres:postgres@postgres:5432/postgres
71
- - BASE_PATH=/
72
- ports:
73
- - "127.0.0.1:3000:4000"
74
- networks:
75
- - powerhouse_network
76
- depends_on:
77
- postgres:
78
- condition: service_healthy
79
-
80
- switchboard:
81
- image: ghcr.io/powerhouse-inc/powerhouse/switchboard:dev
82
- environment:
83
- - DATABASE_URL=postgres://postgres:postgres@postgres:5432/postgres
84
- ports:
85
- - "127.0.0.1:4000:4001"
86
- networks:
87
- - powerhouse_network
88
- depends_on:
89
- postgres:
90
- condition: service_healthy
91
-
92
- postgres:
93
- image: postgres:16.1
94
- ports:
95
- - "127.0.0.1:5444:5432"
96
- environment:
97
- - POSTGRES_PASSWORD=postgres
98
- - POSTGRES_DB=postgres
99
- - POSTGRES_USER=postgres
100
- networks:
101
- - powerhouse_network
102
- healthcheck:
103
- test: ["CMD-SHELL", "pg_isready -U postgres"]
104
- interval: 5s
105
- timeout: 3s
106
- retries: 3
107
-
108
- networks:
109
- powerhouse_network:
110
- name: powerhouse_network
111
- ```
112
-
113
- ### Running the Stack
114
-
115
- Start all services:
116
-
117
- ```bash
118
- docker compose up -d
119
- ```
120
-
121
- View logs:
122
-
123
- ```bash
124
- docker compose logs -f
125
- ```
126
-
127
- Stop all services:
128
-
129
- ```bash
130
- docker compose down
131
- ```
132
-
133
- After starting, you can access:
134
- - **Connect**: http://localhost:3000
135
- - **Switchboard**: http://localhost:4000
136
-
137
- ## Environment Variables
138
-
139
- ### Connect Environment Variables
140
-
141
- | Variable | Description | Default |
142
- |----------|-------------|---------|
143
- | `PORT` | Port the server listens on | `4000` |
144
- | `PH_CONNECT_BASE_PATH` | Base URL path for the application | `/` |
145
- | `PH_PACKAGES` | Comma-separated list of packages to install at startup | `""` |
146
- | `PH_CONNECT_SENTRY_DSN` | Sentry DSN for error tracking | `""` |
147
- | `PH_CONNECT_SENTRY_ENV` | Sentry environment name | `""` |
148
- | `DATABASE_URL` | PostgreSQL connection string | Required |
149
-
150
- #### Feature Flags
151
-
152
- | Variable | Description | Default |
153
- |----------|-------------|---------|
154
- | `PH_CONNECT_DEFAULT_DRIVES_URL` | Default drives URL to load | `""` |
155
- | `PH_CONNECT_ENABLED_EDITORS` | Enabled editor types (`*` for all) | `"*"` |
156
- | `PH_CONNECT_DISABLED_EDITORS` | Disabled editor types | `""` |
157
- | `PH_CONNECT_PUBLIC_DRIVES_ENABLED` | Enable public drives | `"true"` |
158
- | `PH_CONNECT_CLOUD_DRIVES_ENABLED` | Enable cloud drives | `"true"` |
159
- | `PH_CONNECT_LOCAL_DRIVES_ENABLED` | Enable local drives | `"true"` |
160
- | `PH_CONNECT_SEARCH_BAR_ENABLED` | Enable search bar | `"false"` |
161
- | `PH_CONNECT_DISABLE_ADD_PUBLIC_DRIVES` | Disable adding public drives | `"false"` |
162
- | `PH_CONNECT_DISABLE_ADD_CLOUD_DRIVES` | Disable adding cloud drives | `"false"` |
163
- | `PH_CONNECT_DISABLE_ADD_LOCAL_DRIVES` | Disable adding local drives | `"false"` |
164
- | `PH_CONNECT_DISABLE_DELETE_PUBLIC_DRIVES` | Disable deleting public drives | `"false"` |
165
- | `PH_CONNECT_DISABLE_DELETE_CLOUD_DRIVES` | Disable deleting cloud drives | `"false"` |
166
- | `PH_CONNECT_DISABLE_DELETE_LOCAL_DRIVES` | Disable deleting local drives | `"false"` |
167
- | `PH_CONNECT_HIDE_DOCUMENT_MODEL_SELECTION_SETTINGS` | Hide document model selection | `"true"` |
168
-
169
- #### Renown Authentication
170
-
171
- | Variable | Description | Default |
172
- |----------|-------------|---------|
173
- | `PH_CONNECT_RENOWN_URL` | Renown authentication service URL | `"https://auth.renown.id"` |
174
- | `PH_CONNECT_RENOWN_NETWORK_ID` | Renown network identifier | `"eip155"` |
175
- | `PH_CONNECT_RENOWN_CHAIN_ID` | Renown chain ID | `1` |
176
-
177
- ### Switchboard Environment Variables
178
-
179
- #### Core Configuration
180
-
181
- | Variable | Description | Default |
182
- |----------|-------------|---------|
183
- | `PORT` | Port the server listens on | `4001` |
184
- | `PH_SWITCHBOARD_PORT` | Alias for PORT | `$PORT` |
185
- | `DATABASE_URL` | PostgreSQL or SQLite connection string | `"dev.db"` |
186
- | `PH_SWITCHBOARD_DATABASE_URL` | Alias for DATABASE_URL | `"dev.db"` |
187
- | `BASE_PATH` | Base URL path for the API | `"/"` |
188
- | `PH_PACKAGES` | Comma-separated list of packages to install at startup | `""` |
189
-
190
- #### Authentication
191
-
192
- | Variable | Description | Default |
193
- |----------|-------------|---------|
194
- | `AUTH_ENABLED` | Enable authentication | `"false"` |
195
- | `ADMINS` | Comma-separated list of admin wallet addresses | `""` |
196
- | `USERS` | Comma-separated list of user wallet addresses | `""` |
197
- | `GUESTS` | Comma-separated list of guest wallet addresses | `""` |
198
- | `FREE_ENTRY` | Allow unauthenticated access when auth is enabled | `"false"` |
199
-
200
- #### Error Tracking & Monitoring
201
-
202
- | Variable | Description | Default |
203
- |----------|-------------|---------|
204
- | `SENTRY_DSN` | Sentry DSN for error tracking | `""` |
205
- | `SENTRY_ENV` | Sentry environment name (e.g., "production", "staging") | `""` |
206
- | `PYROSCOPE_SERVER_ADDRESS` | Pyroscope server address for performance profiling | `""` |
207
-
208
- ## Installing Custom Packages
209
-
210
- Both Connect and Switchboard support installing custom Powerhouse packages at container startup using the `PH_PACKAGES` environment variable.
211
-
212
- ```yaml
213
- services:
214
- connect:
215
- image: ghcr.io/powerhouse-inc/powerhouse/connect:dev
216
- environment:
217
- - PH_PACKAGES=@powerhousedao/todo-demo-package,@powerhousedao/another-package
218
- ```
219
-
220
- Packages are installed using the `ph install` command before the service starts.
221
-
222
- ## Image Architecture
223
-
224
- ### Connect Image
225
-
226
- The Connect image is based on Alpine Linux and includes:
227
- - Node.js and pnpm
228
- - Nginx with Brotli compression
229
- - The `ph-cmd` CLI tool
230
- - A pre-initialized Powerhouse project
231
-
232
- At startup, the entrypoint script:
233
- 1. Installs any packages specified in `PH_PACKAGES`
234
- 2. Builds the Connect frontend with `ph connect build`
235
- 3. Configures and starts Nginx to serve the built files
236
-
237
- ### Switchboard Image
238
-
239
- The Switchboard image is based on Node.js 22 and includes:
240
- - pnpm package manager
241
- - The `ph-cmd` CLI tool
242
- - Prisma CLI for database migrations
243
- - A pre-initialized Powerhouse project
244
-
245
- At startup, the entrypoint script:
246
- 1. Installs any packages specified in `PH_PACKAGES`
247
- 2. Runs Prisma database migrations (if using PostgreSQL)
248
- 3. Starts the Switchboard server with `ph switchboard`
249
-
250
- ## Production Considerations
251
-
252
- ### Using Specific Version Tags
253
-
254
- For production deployments, always use specific version tags instead of `latest` or `dev`:
255
-
256
- ```yaml
257
- services:
258
- connect:
259
- image: ghcr.io/powerhouse-inc/powerhouse/connect:v1.0.0
260
- switchboard:
261
- image: ghcr.io/powerhouse-inc/powerhouse/switchboard:v1.0.0
262
- ```
263
-
264
- ### Database Persistence
265
-
266
- For production, ensure your PostgreSQL data is persisted using volumes:
267
-
268
- ```yaml
269
- services:
270
- postgres:
271
- image: postgres:16.1
272
- volumes:
273
- - postgres_data:/var/lib/postgresql/data
274
- environment:
275
- - POSTGRES_PASSWORD=your-secure-password
276
- - POSTGRES_DB=powerhouse
277
- - POSTGRES_USER=powerhouse
278
-
279
- volumes:
280
- postgres_data:
281
- ```
282
-
283
- ### Health Checks
284
-
285
- The provided docker-compose.yml includes health checks for PostgreSQL. Services wait for the database to be healthy before starting, preventing connection errors during startup.
286
-
287
- ### Network Security
288
-
289
- The example configuration binds ports to `127.0.0.1` only:
290
-
291
- ```yaml
292
- ports:
293
- - "127.0.0.1:3000:4000"
294
- ```
295
-
296
- This prevents direct external access. In production, use a reverse proxy (like Nginx or Traefik) to:
297
- - Terminate SSL/TLS
298
- - Handle load balancing
299
- - Provide additional security headers
300
-
301
- ### Environment File
302
-
303
- For better security, use a `.env` file instead of hardcoding credentials:
304
-
305
- ```bash
306
- # .env
307
- POSTGRES_PASSWORD=your-secure-password
308
- DATABASE_URL=postgres://powerhouse:your-secure-password@postgres:5432/powerhouse
309
- ```
310
-
311
- ```yaml
312
- services:
313
- switchboard:
314
- image: ghcr.io/powerhouse-inc/powerhouse/switchboard:latest
315
- env_file:
316
- - .env
317
- ```
318
-
319
- ## Troubleshooting
320
-
321
- ### Container Won't Start
322
-
323
- Check the logs for errors:
324
-
325
- ```bash
326
- docker compose logs connect
327
- docker compose logs switchboard
328
- ```
329
-
330
- ### Database Connection Issues
331
-
332
- Ensure the database is ready before services start:
333
-
334
- ```bash
335
- docker compose logs postgres
336
- ```
337
-
338
- Verify the `DATABASE_URL` format:
339
- ```
340
- postgres://user:password@host:port/database
341
- ```
342
-
343
- ### Package Installation Fails
344
-
345
- If custom packages fail to install, check:
346
- 1. Package name is correct
347
- 2. Network connectivity from container
348
- 3. Container has access to npm registry
349
-
350
- ### Permission Issues
351
-
352
- If you encounter permission issues with volumes:
353
-
354
- ```bash
355
- # Fix ownership
356
- sudo chown -R 1000:1000 ./data
357
- ```
358
-
359
- ## Building Custom Images
360
-
361
- You can extend the official images for custom deployments:
362
-
363
- ```dockerfile
364
- FROM ghcr.io/powerhouse-inc/powerhouse/connect:latest
365
-
366
- # Install additional packages at build time
367
- RUN ph install @powerhousedao/my-custom-package
368
-
369
- # Add custom configuration
370
- COPY my-nginx.conf /etc/nginx/nginx.conf.template
371
- ```
372
-
373
- Build and push your custom image:
374
-
375
- ```bash
376
- docker build -t my-registry/my-connect:latest .
377
- docker push my-registry/my-connect:latest
378
- ```
379
-
380
- ## Next Steps
381
-
382
- - Learn about [Environment Configuration](./04-ConfigureEnvironment.md) for more detailed setup options
383
- - Explore [Publishing Your Project](./02-PublishYourProject.md) to create your own packages
384
- - Check the [Setup Environment Guide](./03-SetupEnvironment.md) for VM-based deployments
@@ -1,24 +0,0 @@
1
- # Step 0 - get the starter code
2
-
3
- Normally you would initialize a new powerhouse project by running `ph init` with your project name. But since this is a tutorial, we want to provide branches with the final code for each step.
4
-
5
- Just for the tutorial, please instead make a fork of [this repository](https://github.com/powerhouse-inc/todo-tutorial).
6
-
7
- *NOTE:* please _uncheck_ the checkbox that says "copy the main branch only" when making your fork — we want to keep the other branches for each step.
8
-
9
- Once you have your fork, clone it to your machine with `git clone`, the GitHub desktop app or the GitHub cli.
10
-
11
- The starter branch of this tutorial is: `step-1-generate-todo-list-document-model`.
12
-
13
- Checkout that branch, and then create your own branch from it with whatever name you want, something like `do-the-tutorial` will work nicely.
14
-
15
- The code at the step 1 branch of this repository is exactly the same as what you would get if you ran `ph init todo-tutorial`.
16
-
17
- Each step in this tutorial has two branches associated with it. One is the starting point and the other is the final code after the step is complete. They each have names like `step-1-` for the starting point and `step-1-complete-` for the complete code. You can use the starting point branches if you want to start at a later step or skip a step, and you can use the complete code to compare with your branch if you get stuck.
18
-
19
- To compare your branch, either do `git diff my-branch step-complete-branch` or use the "compare with branch" option in the GitHub desktop app.
20
-
21
- Finally, run `pnpm install` to install the project dependencies.
22
-
23
- Now we're ready to get started.
24
-
@@ -1,211 +0,0 @@
1
- # Step 1 - Generate the `TodoList` document model
2
-
3
- ## Overview
4
-
5
- This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.
6
- A Powerhouse project primarily consists of a document model and its editor.
7
- As your projects use-case expands you can add data-integrations or a specific drive-app as seen in the demo package.
8
-
9
- For todays purpose, you'll be using Connect, our user-centric collaboration tool and Vetra Studio, the builder tooling through which developers can access and manage specifications of your project.
10
-
11
- ## Develop a single document model in Connect
12
-
13
- Once in the project directory, run the `pnpm connect` command to start a local instance of the Connect application. This allows you to start your document model specification document.
14
- Run the following command to start the Connect application:
15
-
16
- ```bash
17
- pnpm connect
18
- ```
19
-
20
- The Connect application will start and you will see the following output:
21
-
22
- ```bash
23
- ➜ Local: http://localhost:3000/
24
- ➜ Network: http://192.168.5.110:3000/
25
- ➜ press h + enter to show help
26
- ```
27
-
28
- A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser. You will see your local drive and a button to create a new drive.
29
-
30
- :::tip
31
- If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.
32
- Clear the storage of your localhost application as it might has an old session cached.
33
- :::
34
-
35
- 4. Move into your local drive.
36
- Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page. Name your document `Todo List`.
37
-
38
- If you've followed the steps correctly, you'll have an empty `TodoList` document where you can define the **'Document Specifications'**.
39
-
40
- ## TodoList document specification
41
-
42
- To start, fill in the following details for your new document model:
43
-
44
- Name: `Todo List`
45
- Document type: `powerhouse/todo-list`
46
- Author name: Powerhouse
47
- Website URL: https://powerhouse.inc
48
-
49
- It's important that you use these exact details so that your generated code matches the generated code in the tutorial repository.
50
-
51
- We'll continue with this project to teach you how to create a document model specification and later an editor for your document model. We use the **GraphQL Schema Definition Language** (SDL) to define the schema for the document model.
52
- Below, you can see the SDL for the `TodoList` document model.
53
-
54
- :::info
55
- This schema defines the **data structure** of the document model and the types involved in its operations, which are detailed further as input types.
56
- Documents in Powerhouse leverage **event sourcing principles**, where every state transition is represented by an operation. GraphQL input types describe operations, ensuring that user intents are captured effectively. These operations detail the parameters needed for state transitions. The use of GraphQL aligns these transitions with explicit, validated, and reproducible commands.
57
- :::
58
-
59
- ## The document model state schema
60
-
61
- First, let's add a graphql type that represents an individual item in a todo list document. A todo item has an ID, text, and can be either checked or unchecked.
62
-
63
- Add this underneath the boilerplate `TodoListState` type you see in the Global State Schema text editor.
64
-
65
- ```graphql
66
- # Defines a GraphQL type for a single to-do item
67
- type TodoItem {
68
- id: OID! # Unique identifier for each to-do item
69
- text: String! # The text description of the to-do item
70
- checked: Boolean! # Status of the to-do item (checked/unchecked)
71
- }
72
- ```
73
-
74
- Now update the `TodoListState` type to use our new type by replacing the boilerplate with this:
75
-
76
- ```graphql
77
- type TodoListState {
78
- items: [TodoItem!]!
79
- }
80
- ```
81
-
82
- The final result in your editor should look like this:
83
-
84
- ```graphql
85
- type TodoListState {
86
- items: [TodoItem!]!
87
- }
88
-
89
- # Defines a GraphQL type for a single to-do item
90
- type TodoItem {
91
- id: OID! # Unique identifier for each to-do item
92
- text: String! # The text description of the to-do item
93
- checked: Boolean! # Status of the to-do item (checked/unchecked)
94
- }
95
- ```
96
-
97
- With our state schema defined, go ahead and click the "Sync with schema" button underneath "Global State Initial Value". This will set the initial state for the documents you create with this model based on the schema you defined.
98
-
99
- Your initial value field should now look like this:
100
-
101
- ```json
102
- {
103
- "items": []
104
- }
105
- ```
106
-
107
- ## Operation inputs and their schemas
108
-
109
- We've defined the shape for the state of our `TodoList` documents, but we also need to be able to update them.
110
-
111
- Documents are updated by dispatching actions, which are applied to documents as operations.
112
-
113
- We define modules to group sets of operations together. In this simple case, we will only need one module.
114
-
115
- Add a new module for our `todos` operations by typing `todos` in the "Add new module" input and pressing enter.
116
-
117
- We need to add three different operations to this module:
118
-
119
- 1. add todo item
120
- 2. update todo item
121
- 3. delete todo item
122
-
123
- Let's start with adding todos.
124
-
125
- When we add a new todo, the only input we need to provide is the text. Creating the ID will be handled later in our reducer code, and todos always start as unchecked by default.
126
-
127
- type `add todo item` in the "Add new operation" input and press enter.
128
-
129
- You will see your new operation with the name `ADD_TODO_ITEM` (we automatically handle changing the casing to the required CONSTANT_CASE).
130
-
131
- You will also see a boilerplate placeholder graphql input.
132
-
133
- Update the graphql input like so:
134
-
135
- ```graphql
136
- input AddTodoItemInput {
137
- text: String!
138
- }
139
- ```
140
-
141
- Next let's handle updating todo items.
142
-
143
- Type `update todo item` in the "Add new operation" input and press enter.
144
-
145
- For updating items, we will need to provide an `id` so we know which one to update. We can use the same operation to update the text or the checked state, so both of these fields are optional (no ! on the field).
146
-
147
- Update the `UpdateTodoItemInput` to be like so:
148
-
149
- ```graphql
150
- input UpdateTodoItemInput {
151
- id: OID!
152
- text: String
153
- checked: Boolean
154
- }
155
- ```
156
-
157
- Finally, we can handle the delete item operation.
158
-
159
- type `delete todo item` in the "Add new operation" input.
160
-
161
- For deleting items, all we need is an `id`.
162
-
163
- Update your `DeleteTodoItemInput` to be like this:
164
-
165
- ```graphql
166
- input DeleteTodoItemInput {
167
- id: OID!
168
- }
169
- ```
170
-
171
- Once you have added all the input operations, click the `Export` button at the top right of the editor to save the document model specification document to your local machine. Ideally, you should save your file in the root of your repository with the name `todo-list.phd`
172
-
173
- ## Generating your document model code
174
-
175
- With our newly created document model, we can run the codegen to generate the rest of the code for it.
176
-
177
- To run the codegen, you use the `generate` command with a path to the file you just exported.
178
-
179
- ```bash
180
- pnpm generate ./todo-list.phd
181
- ```
182
-
183
- **NOTE:** this generated code contains values that will always be different for each generated document model, like module ids for example. For the purposes of this tutorial, we recommend that you instead use the reference example that we have already included in the repo for you — this will make your generated code look exactly the same as the generated code in the branches in the repo, and your diffs will match exactly.
184
-
185
- To use our reference example, run:
186
-
187
- ```bash
188
- pnpm generate ./todo-list.phdm.phd
189
- ```
190
-
191
- This will overwrite your generated code with code that is identical to the branches in this repository.
192
-
193
- ## Check your work
194
-
195
- To make sure all works as expected, we should:
196
-
197
- - check types
198
- run: `pnpm tsc`
199
-
200
- - check linting
201
- run: `pnpm lint`
202
-
203
- - check tests
204
- run: `pnpm test`
205
-
206
- - make sure your code matches the code in the completed step branch
207
- run: `git diff your-branch-name step-1-complete-generated-todo-list-document-model`
208
-
209
- ### Up next: reducers and operations
210
-
211
- Up next, you'll learn how to implement the runtime logic and components that will use the `TodoList` document model specification you've just created and exported.