@powerhousedao/academy 2.5.0-dev.4 → 2.5.0-dev.41

package/docs/academy/03-ExampleUsecases/Chatroom/01-SetupBuilderEnvironment.md

@@ -1,216 +0,0 @@
-
-# Setup Builder Environment
-
-Let's set up your computer to start building your first Document Model. Don't worry if this is your first time setting up a development environment - we'll guide you through each step!
-
-:::warning
-If you've already setup git, node, and npm, your most important step is to install the Powerhouse CLI with the command `npm install ph-cmd`. A global install is recommended if you want to use the command from any directory as a power user. The Powerhouse CLI is used to create, build, and run your Document Models and give you direct access to a series of Powerhouse ecosystem tools.
-:::
-
-## Table of Contents
-- [Prerequisites](#prerequisites)
-- [Installing node.js 22](#installing-nodejs)
-  - [For Windows](#for-windows)
-  - [For macOS](#for-macos)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian)
-- [Installing Visual Studio Code](#installing-visual-studio-code)
-  - [For Windows](#for-windows-1)
-  - [For macOS](#for-macos-1)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-1)
-- [Install Git](#install-git)
-  - [For Windows](#for-windows-2)
-  - [For macOS](#for-macos-2)
-  - [For Linux (Ubuntu/Debian)](#for-linux-ubuntudebian-2)
-- [Configure Git](#configure-git-all-systems)
-- [Verify Installation](#verify-installation)
-
-## Prerequisites
-
-Before we begin building our Document Model, we need to install some software on your computer. We'll need three main tools: node.js 22, which helps us run our code, Visual Studio Code (VS Code), which is where we'll write our code, and Git, which helps us manage our code. Follow the steps below based on your computer's operating system.
-
-### Installing node.js 22
-
-node.js 22 is a tool that lets us run our application. Let's install it step by step.
-
-#### For Windows:
-1. **Set up PowerShell for running commands:**
-   - Press the Windows key
-   - Type "PowerShell"
-   - Right-click on "Windows PowerShell" and select "Run as administrator"
-   - In the PowerShell window, type this command and press Enter:
-   ```powershell
-   Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
-   ```
-   - Type 'A' when prompted to confirm
-   - You can now close this window and open PowerShell normally for the remaining steps
-
-2. **Install node.js 22:**
-   - Visit the [node.js 22 official website](https://nodejs.org/)
-   - Click the big green button that says "LTS" (this means Long Term Support - it's the most stable version)
-   - Once the installer downloads, double-click it to start installation
-   - Click "Next" through the installation wizard, leaving all settings at their defaults
-
-3. **Verify Installation:**
-   - Open PowerShell (no need for admin mode)
-   - Type these commands one at a time and press Enter after each:
-   ```powershell
-   node --version
-   pnpm --version
-   ```
-   - You should see version numbers appear after each command (e.g., v18.17.0). If you do, congratulations - node.js 22 is installed!
-
-> **Note**: If node.js 22 commands don't work in VS Code, restart VS Code to refresh environment variables.
-
-#### For macOS:
-1. **Install Homebrew:**
-   - Open Terminal (press Command + Space and type "Terminal")
-   - Copy and paste this command into Terminal and press Enter:
-   ```bash
-   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-   ```
-   - Follow any additional instructions that appear
-
-2. **Install node.js 22:**
-   - In the same Terminal window, type this command and press Enter:
-   ```bash
-   brew install node
-   ```
-
-3. **Verify Installation:**
-   - In Terminal, type these commands one at a time and press Enter after each:
-   ```bash
-   node --version
-   pnpm --version
-   ```
-   - If you see version numbers, you've successfully installed node.js 22!
-
-#### For Linux (Ubuntu/Debian):
-1. **Open Terminal:**
-   - Press Ctrl + Alt + T on your keyboard, or
-   - Click the Activities button and type "Terminal"
-
-2. **Update Package List:**
-   ```bash
-   sudo apt update
-   ```
-
-3. **Install node.js 22 and npm:**
-   ```bash
-   sudo apt install nodejs npm
-   ```
-
-4. **Verify Installation:**
-   - Type these commands one at a time and press Enter after each:
-   ```bash
-   node --version
-   pnpm --version
-   ```
-   - If you see version numbers, you're all set!
-
-### Installing Visual Studio Code
-
-VS Code is the editor we'll use to write our code. Here's how to install it:
-
-#### For Windows:
-1. Visit the [Visual Studio Code website](https://code.visualstudio.com/)
-2. Click the blue "Download for Windows" button
-3. Once the installer downloads, double-click it
-4. Accept the license agreement and click "Next"
-5. Leave the default installation location and click "Next"
-6. In the Select Additional Tasks window, make sure "Add to PATH" is checked
-7. Click "Next" and then "Install"
-8. When installation is complete, click "Finish"
-
-#### For macOS:
-1. Visit the [Visual Studio Code website](https://code.visualstudio.com/)
-2. Click the blue "Download for Mac" button
-3. Once the .zip file downloads, double-click it to extract
-4. Drag Visual Studio Code.app to the Applications folder
-5. Double-click the app to launch it
-6. To make VS Code available in your terminal:
-   - Open VS Code
-   - Press Command + Shift + P
-   - Type "shell command" and select "Install 'code' command in PATH"
-
-#### For Linux (Ubuntu/Debian):
-1. Open Terminal (Ctrl + Alt + T)
-2. First, update the packages list:
-   ```bash
-   sudo apt update
-   ```
-3. Install the dependencies needed to add Microsoft's repository:
-   ```bash
-   sudo apt install software-properties-common apt-transport-https wget
-   ```
-4. Import Microsoft's GPG key:
-   ```bash
-   wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
-   ```
-5. Add the VS Code repository:
-   ```bash
-   sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
-   ```
-6. Install VS Code:
-   ```bash
-   sudo apt install code
-   ```
-7. Once installed, you can launch VS Code by:
-   - Typing `code` in the terminal, or
-   - Finding it in your Applications menu
-
-### Install Git
-
-#### Windows
-1. Open PowerShell (press Windows key, type "PowerShell", and press Enter)
-2. Visit the [Git website](https://git-scm.com/)
-3. Download the latest version for Windows
-4. Run the installer and use the recommended settings
-5. Verify installation by opening PowerShell:
-   ```powershell
-   git --version
-   ```
-
-#### macOS
-1. Install using Homebrew:
-   ```bash
-   brew install git
-   ```
-2. Verify installation:
-   ```bash
-   git --version
-   ```
-
-#### Linux (Ubuntu/Debian)
-1. Update package list:
-   ```bash
-   sudo apt update
-   ```
-2. Install Git:
-   ```bash
-   sudo apt install git
-   ```
-3. Verify installation:
-   ```bash
-   git --version
-   ```
-
-### Configure Git (All Systems)
-
-Open your terminal (command prompt) and run the following commands to set up Git:
-
-After installation, set up your identity:
-```bash
-git config --global user.name "Your Name"
-git config --global user.email "your.email@example.com"
-```
-
-### Verify Installation
-
-Open your terminal (command prompt) and run the following commands to verify your setup:
-```bash
-node --version
-pnpm --version
-git --version
-```
-
-You should see version numbers displayed for all commands. You're now ready to start building your Document Model!

package/docs/academy/06-ComponentLibrary/02-BuildingWithScalars.md

@@ -1,54 +0,0 @@
-# Build with Scalars
-
-Scalars are here to help you define custom fields in your document model schema and speed up the development process.
-There are two applications of scalar components in the document model workflow:
-
-1. At the **schema definition** level where you build your schema and write your GraphQL state schema.
-2. At the **frontend / react** level where you import it and place it in your UI to represent the scalar field
-
-## Scalar Definition in the Document Model Schema
-
-As you might know, the document model schema defines the structure of the document and serves as the backbone of the document model. The GraphQL state schema defines how data is captured with the help of types & scalars. When you define a scalar in the document model schema, you are essentially defining a new field that can be used in the document model to capture data.
-
-In the Document Model Editor, you can find all the custom scalar types available in our documentation under the 'Scalars' section.
-
-Insert image of the feature. 
-
-````
-scalar PHID <-- imported from the design system library? not sure
-type MyType {
-  myScalar: PHID
-}   
-````
-
-## React Component Implementation in the Frontend
-
-All of our reusable components are available in the Document-Engineering design system library or package.
-This package comes as a dependency in your project when creating a new document model project.
-````
-import PHIDField from 'document-engineering'
-const reactComponent = () => {
-
-return (
-  <div>
-    <PHIDField
-      fetchOptionsCallback={function Js(){}}
-      fetchSelectedOptionCallback={function Js(){}}
-      label="PHID field"
-      name="phid-field"
-      placeholder="phd:"
-    />
-
-  </div>
-  
-  )
-
-}
-````
-
-## Scalars & Reusable Components
-
-To make your life easier, Powerhouse has defined all useful scalars with a set of reusable code and UI components.
-The reusable components are essentially a set of front-end components based on GraphQL scalars. Powerhouse also has a set of custom scalars that are not part of the GraphQL standard but are specific to the web3 ecosystem.
-
-Read the next chapter to get familiar with our reusable components. 

package/docs/academy/06-ComponentLibrary/03-Scalar-Components/01-phid-field.mdx

@@ -1,72 +0,0 @@
----
-sidebar_label: 'PHID Field'
-sidebar_position: 1
----
-
-import { Tabs, TabItem } from '@theme/Tabs';
-
-# PHID Field Example
-
-### **Scalar Definition**
-
-- **Name:** `PHID` (Powerhouse ID)
-- **Purpose:** Represents a unique identifier pointing to a document, branch, scope, or data object within the Powerhouse system.
-
-
-<details>
-<summary>**Formatting of the component:**</summary>
-    - **Basic Notation:** `phd:<documentID>`
-        - **Branch and Scope:** Optional components appended using colons `:`.
-        - **Full Notation:** `phd:<documentID>:<branch>:<scope>`
-            - **Branch:** Defaults to `main` if omitted.
-            - **Scope:** Defaults to `public` if omitted.
-    - **Data Object Reference:** `phd:<documentID>/<dataObjectID>`
-    - **URL Format:** `phd://<domain>/<documentID>`
-        - Example: `phd://switchboard.powerhouse.xyz/baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-
-**Examples of the component formatting:**
-    - **Basic PHID:** `phd:baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-    - **With Branch:** `phd:baefc2a4...:draft`
-    - **With Scope:** `phd:baefc2a4...::local`
-    - **With Branch and Scope:** `phd:baefc2a4...:draft:local`
-    - **With Data Object ID:** `phd:baefc2a4.../3cf05e40...`
-</details>
-
-<details>
-<summary>**Validation of the Component:**</summary>
-    - **Validate each format:**
-        1. **PHID only:** Ensure the document ID is a valid UUID.
-        2. **PHID with data element (OID):** Validate both the document ID and the data object ID.
-        3. **PHID with branch:** Validate the document ID and check if the branch is properly formatted.
-        4. **PHID with scope:** Validate the document ID and check if the scope is valid.
-        5. **PHID with branch and scope:** Validate all three components: document ID, branch, and scope.
-    - **Error Message Example:** "Invalid PHID format. Please check the document ID, branch, or scope."
-</details>
-
-The following is a the UI component for the PHID field and scalar in a storybook.
-We use Storybook as our component development environment. 
-It allows us to build and test UI components in isolation, making it easier to develop, test, and document reusable components.
-In our stories you'll find first find a basic UI implementation example of the component, followed by the component's properties, events, and validation options.
-
-- A list of the **default properties** and their descriptions, and a list of the available events that can be triggered.
-- A list of the **component's specific properties** and attributes based on the components functionality. 
-- A list of **validation options**, or ways to validate the component's desired input values.
-
-Additionally, you'll find various **stories of the components in different states**.
-
-<div style={{ 
-  border: '1px solid #E5E7EB', 
-  borderRadius: '8px', 
-  padding: '16px',
-  marginBottom: '20px',
-}}>
-  <iframe
-    src="https://storybook.powerhouse.academy/iframe.html?id=scalars-phid-field--readme&viewMode=story"
-    style={{
-      width: '100%',
-      height: '4500px',
-      border: 'none',
-    }}
-    title="PhidField Component Demo"
-  />
-</div>

package/docs/academy/06-ComponentLibrary/04-Complex-Components/01-sidebar.mdx

@@ -1,36 +0,0 @@
-import { Tabs, TabItem } from '@theme/Tabs';
-
-# Sidebar
-
-### **Scalar Definition**
-
-- **Name:** `Sidebar`
-- **Purpose:** The Sidebar component can be used within a page layout to provide a sidebar navigation. It provided a tree structure of nodes that can be used to navigate the application offering customization, search and more.
-
-
-<details>
-<summary>**Formatting of the component:**</summary>
-    
-</details>
-
-<details>
-<summary>**Validation of the Component:**</summary>
-   
-</details>
-
-<div style={{ 
-  border: '1px solid #E5E7EB', 
-  borderRadius: '8px', 
-  padding: '16px',
-  marginBottom: '20px',
-}}>
-  <iframe
-    src="https://dspot-scalars-storybook.vercel.app/iframe.html?args=&id=document-engineering-complex-components-sidebar--readme&viewMode=story"
-    style={{
-      width: '100%',
-      height: '2000px',
-      border: 'none',
-    }}
-    title="Sidebar Component Demo"
-  />
-</div>

package/docs/academy/06-ComponentLibrary/05-Layout-Components/01-test-toupdate.mdx

@@ -1,61 +0,0 @@
----
-sidebar_label: 'PHID Field'
-sidebar_position: 1
----
-
-import { Tabs, TabItem } from '@theme/Tabs';
-
-# PHID Field Example
-
-### **Scalar Definition**
-
-- **Name:** `PHID` (Powerhouse ID)
-- **Purpose:** Represents a unique identifier pointing to a document, branch, scope, or data object within the Powerhouse system.
-
-
-<details>
-<summary>**Formatting of the component:**</summary>
-    - **Basic Notation:** `phd:<documentID>`
-        - **Branch and Scope:** Optional components appended using colons `:`.
-        - **Full Notation:** `phd:<documentID>:<branch>:<scope>`
-            - **Branch:** Defaults to `main` if omitted.
-            - **Scope:** Defaults to `public` if omitted.
-    - **Data Object Reference:** `phd:<documentID>/<dataObjectID>`
-    - **URL Format:** `phd://<domain>/<documentID>`
-        - Example: `phd://switchboard.powerhouse.xyz/baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-
-**Examples of the component formatting:**
-    - **Basic PHID:** `phd:baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-    - **With Branch:** `phd:baefc2a4...:draft`
-    - **With Scope:** `phd:baefc2a4...::local`
-    - **With Branch and Scope:** `phd:baefc2a4...:draft:local`
-    - **With Data Object ID:** `phd:baefc2a4.../3cf05e40...`
-</details>
-
-<details>
-<summary>**Validation of the Component:**</summary>
-    - **Validate each format:**
-        1. **PHID only:** Ensure the document ID is a valid UUID.
-        2. **PHID with data element (OID):** Validate both the document ID and the data object ID.
-        3. **PHID with branch:** Validate the document ID and check if the branch is properly formatted.
-        4. **PHID with scope:** Validate the document ID and check if the scope is valid.
-        5. **PHID with branch and scope:** Validate all three components: document ID, branch, and scope.
-    - **Error Message Example:** "Invalid PHID format. Please check the document ID, branch, or scope."
-</details>
-
-<div style={{ 
-  border: '1px solid #E5E7EB', 
-  borderRadius: '8px', 
-  padding: '16px',
-  marginBottom: '20px',
-}}>
-  <iframe
-    src="https://dspot-scalars-storybook.vercel.app/iframe.html?args=name:amount-field;placeholder:test;label:Enter%20Amount%20and%20Select%20Currency;type:Amount;placeholderSelect:CUR;allowedTokens:!null;tokenIcons.Sol:1;value.amount:3454564564;value.currency:BTC&id=document-engineering-simple-components-phid-field--readme&viewMode=story"
-    style={{
-      width: '100%',
-      height: '4500px',
-      border: 'none',
-    }}
-    title="PhidField Component Demo"
-  />
-</div>

package/docs/academy/06-ComponentLibrary/06-Fragments/01-test-toupdate.mdx

@@ -1,61 +0,0 @@
----
-sidebar_label: 'PHID Field'
-sidebar_position: 1
----
-
-import { Tabs, TabItem } from '@theme/Tabs';
-
-# PHID Field Example
-
-### **Scalar Definition**
-
-- **Name:** `PHID` (Powerhouse ID)
-- **Purpose:** Represents a unique identifier pointing to a document, branch, scope, or data object within the Powerhouse system.
-
-
-<details>
-<summary>**Formatting of the component:**</summary>
-    - **Basic Notation:** `phd:<documentID>`
-        - **Branch and Scope:** Optional components appended using colons `:`.
-        - **Full Notation:** `phd:<documentID>:<branch>:<scope>`
-            - **Branch:** Defaults to `main` if omitted.
-            - **Scope:** Defaults to `public` if omitted.
-    - **Data Object Reference:** `phd:<documentID>/<dataObjectID>`
-    - **URL Format:** `phd://<domain>/<documentID>`
-        - Example: `phd://switchboard.powerhouse.xyz/baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-
-**Examples of the component formatting:**
-    - **Basic PHID:** `phd:baefc2a4-f9a0-4950-8161-fd8d8cc7dea9`
-    - **With Branch:** `phd:baefc2a4...:draft`
-    - **With Scope:** `phd:baefc2a4...::local`
-    - **With Branch and Scope:** `phd:baefc2a4...:draft:local`
-    - **With Data Object ID:** `phd:baefc2a4.../3cf05e40...`
-</details>
-
-<details>
-<summary>**Validation of the Component:**</summary>
-    - **Validate each format:**
-        1. **PHID only:** Ensure the document ID is a valid UUID.
-        2. **PHID with data element (OID):** Validate both the document ID and the data object ID.
-        3. **PHID with branch:** Validate the document ID and check if the branch is properly formatted.
-        4. **PHID with scope:** Validate the document ID and check if the scope is valid.
-        5. **PHID with branch and scope:** Validate all three components: document ID, branch, and scope.
-    - **Error Message Example:** "Invalid PHID format. Please check the document ID, branch, or scope."
-</details>
-
-<div style={{ 
-  border: '1px solid #E5E7EB', 
-  borderRadius: '8px', 
-  padding: '16px',
-  marginBottom: '20px',
-}}>
-  <iframe
-    src="https://dspot-scalars-storybook.vercel.app/iframe.html?args=name:amount-field;placeholder:test;label:Enter%20Amount%20and%20Select%20Currency;type:Amount;placeholderSelect:CUR;allowedTokens:!null;tokenIcons.Sol:1;value.amount:3454564564;value.currency:BTC&id=document-engineering-simple-components-phid-field--readme&viewMode=story"
-    style={{
-      width: '100%',
-      height: '4500px',
-      border: 'none',
-    }}
-    title="PhidField Component Demo"
-  />
-</div>