search

powerhouse-inc / powerhouse

https://powerhouse-design-system-six.vercel.app
0 stars 0 forks source link

Devcon & Core dev Demo Scenario (Feel free to update) #372

Open CallmeT-ty opened 1 month ago

CallmeT-ty commented 1 month ago

We'll keep this issue up to date with the current minimum viable demo flow and will increase the detail and polish of it as we move along.

Initial Setup for Powerhouse Project

1. Start with a clean development environment Ensure your IDE (e.g., VSCode, WebStorm) is set up with no pre-existing projects or configurations.

2. Install Node.js and npm If you don't already have Node.js installed, download and install it from Node.js official website. This will also install npm (Node Package Manager) alongside it.

3. Install GitHub CLI Follow the instructions to install the GitHub CLI. This will allow you to interact with GitHub directly from your terminal.

4. Initialize a new Demo project (IDE) 4.1 We’re currently using npm create document-model-lib to create a new project. It creates a document models project instead of a single todo-list doc Model. PH CLI will eventually turn this command into ph init. Do we want support for the case of having a single doc? It would just change the folder structure.

5. Bring up Connect in a local instance (CONNECT) 5.1 npm run connect (In PH CLI it will become 'ph dev'). This will prompt Local: http://localhost:3000/ to run connect in a local instance.

6. Create the To-Do list document model (CONNECT) 6.1. Use current version of document model editor and export ZIP file We will use a very rough & basic version of the document model-document model to put all mvp functionality in place and only polish with design after (22/10 to be changed)

Global State Schema

# Define a GraphQL type for the state of the to-do list document
type ToDoListState {
  items: [ToDoItem!]! # Array of to-do items
  stats: ToDoListStats! # Statistics about the to-do list items
}

# Define a GraphQL type for a single to-do item
type ToDoItem {
  id: ID! # Unique identifier for each to-do item
  text: String! # The text description of the to-do item
  checked: Boolean! # Status of the to-do item (checked/unchecked)
}

# Define a GraphQL type for the statistics of the to-do list
type ToDoListStats {
  total: Int! # Total number of items
  checked: Int! # Number of checked items
  unchecked: Int! # Number of unchecked items
}

Global Initial State (Auto generated with CodeMirror engine

{
    "items": [],
  "stats": {
    "total": 0,
    "checked": 0,
    "unchecked": 0
  }
}

Operations

input AddTodoItemInput {
  id: ID!
  text: String!
}

input UpdateTodoItemInput {
  id: ID!
  text: String
  checked: Boolean
}

input DeleteTodoItemInput {
  id: ID!
}

7. Generate code from the document model => back to IDE 7.1.npm run generate ./TodoList.phdm.zip (This command will become ph generate) In the future we don't want to use the zipfile, this generation should be automated. But for now we'll focus on the Zipfile path to further optimize.

This will prompt 

> demo@1.0.0 generate
> powerhouse generate ./TodoList.phdm.zip

You will now find the to-do-list as a document model in the document-models folder

8. Navigate to Document model reducers ./document-models/todo-list/src/reducers 8.1. Implement the actual business logic

/**
 * This is a scaffold file meant for customization:
 * - modify it by implementing the reducer functions
 * - delete the file and run the code generator again to have it reset
 */

import { ToDoListToDoOperations } from '../../gen/to-do/operations';

export const reducer: ToDoListToDoOperations = {
    addTodoItemOperation(state, action, dispatch) {
        state.stats.total += 1;
        state.stats.unchecked += 1;
        state.items.push({
            id: action.input.id,
            text: action.input.text,
            checked: false,
        });
    },
    updateTodoItemOperation(state, action, dispatch) {
        const item = state.items.find(item => item.id === action.input.id);
        if (!item) {
            throw new Error(`Item with id ${action.input.id} not found`);
        }
        if (action.input.text) {
            item.text = action.input.text;
        }
        if (action.input.checked) {
            state.stats.unchecked -= 1;
            state.stats.checked += 1;
            item.checked = action.input.checked;
        }
        if (action.input.checked === false) {
            state.stats.unchecked += 1;
            state.stats.checked -= 1;
            item.checked = action.input.checked;
        }
    },
    deleteTodoItemOperation(state, action, dispatch) {
        const item = state.items.find(item => item.id === action.input.id);
        state.stats.total -= 1;
        if (item?.checked) {
            state.stats.checked -= 1;
        }
        if (item?.checked === false) {
            state.stats.unchecked -= 1;
        }
        state.items = state.items.filter(item => item.id !== action.input.id);
    },
};

9. Open an empty document model editor

9.1. npm run generate -- --editor TodoList --document-types “powerhouse/todo-list” 9.2. This will create a new To-Do list document in connect and a button will appear 9.3 Click the 'Todo-list' button to create a new todo list document.

10. Bring up an empty editor within connect studio:

10.1 npm run connect 10.2 An empty editor To-Do list editor opens up This command is currently only working on connect repository. Mono repo efforts should help solve this?

Open questions Getting the editor to work or auto generation of document model? What about the development flow without using connect?

CallmeT-ty commented 1 month ago

List of issues we've been defining after stakeholder meetings, organized according to priority.

ryanwolhuter commented 3 weeks ago

steps:

1.- start a new project: npm create document-model-lib

2.- run code generation (run this one inside of the project created in step 1): npm run generate todo-list.phdm.zip

3.- generate editor: npm run generate -- --editor TodoList --document-types 'powerhouse/todo-list'

4.- start connect studio: LOCAL_DOCUMENT_MODELS=./document-models LOCAL_DOCUMENT_EDITORS=./editors npm run connect

CallmeT-ty commented 3 weeks ago

The To-Do List Demo Scenario Liberuum will support to implement. https://docs.google.com/spreadsheets/d/13zlnFpbTespFPwZSQDNhkMIAPTwF84gvxtgkWtQw_Eg/edit?usp=sharing

CallmeT-ty commented 3 weeks ago

Stretch Goals for Devcon:

Goal 1: GraphQL API:

If we make the graphql api available in local environment (service runner or whatever structure). When we define new Doc & new document. Would the subgraph become available in the api endpoint?

292 => Goal is to run the reactor API with the graphQL endpoint. We could connect connect with the reactor through a default drive. Potentially to be accomplished by end of week. Acaldas formulated it as 'Reactor local packag' => instantiation of a local drive with file storage adapter which starts the graphQL server.

How does plugging in a new subgraph work? It listens and functions as a readmodel that replaces the subgraph? If document models change in the reactor, e.g. new document model. Graphql server needs to reload the schema and update the types. To make the new types available in the documentquery we'll need to reload the type definition. On the other hand, the subgraphs or readmodels

Subgraph is being dynamically created, e.g. schema gets updated. How does it work when there are no graphql ... attached to it. 1) You start with types without mutations 2) A subgraph gets defined with some queries & mutations

Document models get downloaded, listener looks for changes in the router. Next load all subgraphs, load their schema, load an apollo server A small helper is put in place.

How do we plug in the GraphQL into the demo scenario?

ZKtruths question Use an input type and use it as a mutation. Push operations mutation exists for the listeners. What about the sync protocol. What if we use the switchboard side of docsync to push operations? Basically an alternative to Connect. Frank will share info with ZK

Goal 2:

When we generate new document editors. Improvements of usual suspects (Actions etc) to be there and make imports available. Standard functionality of a couple of items: 1) Revision History availability in the editor we are creating: 'We just created a document model and automatically out of the box there is a revision history'. 2) Potentially showing switchboard. User story to be added.