diff --git a/docs/docs/typesync.md b/docs/docs/typesync.md index d25572cc..2172377d 100644 --- a/docs/docs/typesync.md +++ b/docs/docs/typesync.md @@ -1,73 +1,50 @@ --- title: TypeSync -description: To create an app with custom data types. +description: TypeSync is a visual tool that helps you manage your Hypergraph schema and update the schema.ts and mapping.ts for your Hypergraph application. version: 0.0.1 tags: [typesync, hypergraph-cli, schema] --- # 🧬 TypeSync -To create an app with custom data types, you can use the `TypeSync`, fully-functional React application powered by Hypergraph using our scaffolding tool. In just a few minutes, you'll have a local development environment up and running. -## Pre-requisites -- Node.js >= 22 -- pnpm >= 10 (Install with `npm install -g pnpm`) -- Git SSH Setup (for cloning the repo) + +TypeSync is a visual tool that helps you manage your Hypergraph schema and update the schema.ts and mapping.ts for your Hypergraph application. ## Installation -First install the Hypergraph CLI. -``` -pnpm install -g @graphprotocol/hypergraph-cli@latest -``` -Approve the building scripts by running the following command: -``` -pnpm approve-builds -g -``` -Selecting all the options by pressing `a` followed by `Yes` +TypeSync automatically comes with the `hypergraph` package. Once you have it installed it will be available via: -## Launching TypeSync -TypeSync is a visual tool that helps you define your data schema and then generates a complete starter application based on your design. Launch it with +```bash +npx hg typesync --open +# or +pnpm hg typesync --open +bunx hg typesync --open +yarn hg typesync --open ``` -hg typesync --open -``` -This will start the TypeSync server. You can now access the TypeSync app in your browser at ```http://localhost:3000```. + +This will start the TypeSync server. You can now access the TypeSync app in your browser at `http://localhost:3000`. The UI will look like this: + ![TypeSync Dashboard](../static/img/typesync/typesync_dashboard.png) +The UI is split into two main sections: +- The left side is a list of existing types in the Knowledge Graph to pick from. +- The right side represents the schema you are currently working on. + - At the bottom you can find two buttons: + - `Sync with schema.ts` to sync the current schema to your `schema.ts` file. + - `Publish Schema` to publish the current schema to the Knowledge Graph. +- The top right corner you can find a button to `Sign in to Geo Account` to sign in to your Geo Account. This is a prerequisite to publish your schema to the Knowledge Graph. + +## Recommended Flow + +1. Design your schema +2. Sync it to your schema.ts file using the `Sync with schema.ts` button +3. Publish your schema to the Knowledge Graph + 1. Sign in with Geo Connect. To do so click on the `Sign in to Geo Account` button in the top right corner. + 2. In "Connect" select an existing public space or create & select a new public space you want to publish your schema to. Note: Can be any space of your choice and doesn't matter which one. + 3. Click the "Publish Schema" button to publish your schema to the Knowledge Graph. -## Scaffold Your First Application -In the TypeSync Studio: -1. **Create a New Application**: Click on "New App" to start a new application. Give it a name and description. -![Create New App](../static/img/typesync/create_new_app.png) -2. **Browse Your Schema**: Use the Schema Browser to explore existing data types or create new ones. -![Schema Browser](../static/img/typesync/schema_browser.png) -3. **Select Schema**: Choose the data types you want to include in your application. You can select multiple types or create new ones by clicking "Add Type". Click on "Select Template & Generate". -![Select Schema](../static/img/typesync/select_schema.png) -![Add Type](../static/img/typesync/add_type.png) -4. **Generate Application**: After selecting your schema, click on "Generate App". TypeSync will create a complete React application with the selected data types. -![Generate App](../static/img/typesync/generate_app.png) -![App Details](../static/img/typesync/app_details.png) -![App Schema View](../static/img/typesync/app_schema_view.png) -5. **Run Your Application**: Once the app is generated, you can run it locally. Navigate to the generated app directory and run: - ``` - cd - pnpm install - pnpm dev - ``` -This will start the application, and you can view it in your browser at `http://localhost:5173`. -You're all set! You can now start building your application by editing the files in the ```src``` directory. The generated ```src/schema.ts``` file contains the Hypergraph schema you defined in TypeSync. +## Best Practices -Example of the generated schema (```src/schema.ts```): -```typescript -import type { Mapping } from '@graphprotocol/hypergraph'; -import { Id } from '@graphprotocol/hypergraph'; +If there is an existing type ideally use this one and adept it to your needs. This will allow for more interoperability with other applications. -export const mapping: Mapping = { - AcademicYear: { - typeIds: [Id("27e097b7-fba0-4fdd-a264-b0ed70f79e0a")], - properties: { - description: Id("9b1f76ff-9711-404c-861e-59dc3fa7d037"), - name: Id("a126ca53-0c8e-48d5-b888-82c734c38935") - }, - }, -} -``` \ No newline at end of file +For properties prefer existing properties, but in case you need a different type best to create a new property. \ No newline at end of file diff --git a/docs/static/img/typesync/add_type.png b/docs/static/img/typesync/add_type.png deleted file mode 100644 index a7ffa6ed..00000000 Binary files a/docs/static/img/typesync/add_type.png and /dev/null differ diff --git a/docs/static/img/typesync/app_details.png b/docs/static/img/typesync/app_details.png deleted file mode 100644 index b91b815c..00000000 Binary files a/docs/static/img/typesync/app_details.png and /dev/null differ diff --git a/docs/static/img/typesync/app_schema_view.png b/docs/static/img/typesync/app_schema_view.png deleted file mode 100644 index 711eaec5..00000000 Binary files a/docs/static/img/typesync/app_schema_view.png and /dev/null differ diff --git a/docs/static/img/typesync/create_new_app.png b/docs/static/img/typesync/create_new_app.png deleted file mode 100644 index 0b3db8b8..00000000 Binary files a/docs/static/img/typesync/create_new_app.png and /dev/null differ diff --git a/docs/static/img/typesync/generate_app.png b/docs/static/img/typesync/generate_app.png deleted file mode 100644 index 2947f47c..00000000 Binary files a/docs/static/img/typesync/generate_app.png and /dev/null differ diff --git a/docs/static/img/typesync/schema_browser.png b/docs/static/img/typesync/schema_browser.png deleted file mode 100644 index 7e4a6db7..00000000 Binary files a/docs/static/img/typesync/schema_browser.png and /dev/null differ diff --git a/docs/static/img/typesync/select_schema.png b/docs/static/img/typesync/select_schema.png deleted file mode 100644 index 374f23ea..00000000 Binary files a/docs/static/img/typesync/select_schema.png and /dev/null differ diff --git a/docs/static/img/typesync/typesync_dashboard.png b/docs/static/img/typesync/typesync_dashboard.png index 252dd361..be553254 100644 Binary files a/docs/static/img/typesync/typesync_dashboard.png and b/docs/static/img/typesync/typesync_dashboard.png differ