implement Type.optional

Author: nikgraf

apps/events/package.json

@@ -15,6 +15,7 @@
     "@noble/hashes": "^1.8.0",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.2",
     "@tanstack/react-query": "^5.75.5",
     "@tanstack/react-router": "^1.120.2",

apps/events/src/components/events/events.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { Event } from '../../schema';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 
 export const Events = () => {
   const { data: eventsLocalData } = useQuery(Event, { mode: 'private' });
@@ -43,6 +44,7 @@ export const Events = () => {
       {eventsLocalData.map((event) => (
         <div key={event.id} className="flex flex-row items-center gap-2">
           <h2>{event.name}</h2>
+          <p>{event.description}</p>
           <div className="text-xs">{event.id}</div>
           <select
             value={selectedSpace}
@@ -66,10 +68,22 @@ export const Events = () => {
           e.preventDefault();
           const formData = new FormData(e.target as HTMLFormElement);
           const name = formData.get('name') as string;
-          createEvent({ name });
+          const description = formData.get('description') as string;
+          if (!name) {
+            alert('Name is required');
+            return;
+          }
+          if (description) {
+            createEvent({ name, description });
+          } else {
+            createEvent({ name });
+          }
         }}
       >
-        <Input type="text" name="name" />
+        <Label htmlFor="name">Name</Label>
+        <Input type="text" name="name" required />
+        <Label htmlFor="description">Description</Label>
+        <Input type="text" name="description" />
         <Button type="submit">Create Event</Button>
       </form>
     </>

apps/events/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

apps/events/src/mapping.ts

@@ -6,6 +6,7 @@ export const mapping: Mapping = {
     typeIds: [Id.Id('7f9562d4-034d-4385-bf5c-f02cdebba47a')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      description: Id.Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
     },
     relations: {
       sponsors: Id.Id('6860bfac-f703-4289-b789-972d0aaf3abe'),

apps/events/src/schema.ts

@@ -33,6 +33,6 @@ export class Company extends Entity.Class<Company>('Company')({
 
 export class Event extends Entity.Class<Event>('Event')({
   name: Type.Text,
-  // description: Type.Text,
+  description: Type.optional(Type.Text),
   sponsors: Type.Relation(Company),
 }) {}

apps/typesync/client/src/Components/App/Schema/utils.ts

@@ -1,5 +1,6 @@
 import type { AppSchema } from '../../../schema.js';
 
+// TODO
 function fieldToEntityString({
   name,
   type_name,

apps/typesync/src/Generator.ts

@@ -1,10 +1,10 @@
-import { execSync } from 'node:child_process';
-import { readdirSync } from 'node:fs';
 import { FileSystem, Path, type Error as PlatformError } from '@effect/platform';
 import { NodeFileSystem } from '@effect/platform-node';
 import { Doc } from '@effect/printer';
 import { Mapping } from '@graphprotocol/typesync';
 import { Cause, Console, Data, Effect, Array as EffectArray, String as EffectString } from 'effect';
+import { execSync } from 'node:child_process';
+import { readdirSync } from 'node:fs';
 
 import type * as Domain from '../domain/Domain.js';
 import * as Utils from './Utils.js';
@@ -301,6 +301,7 @@ function validatePackageName(name: string): {
   };
 }
 
+// TODO
 // --------------------
 // schema builder
 // --------------------

docs/docs/schema.md

@@ -2,6 +2,8 @@
 
 The Hypergraph schema allows you to define the data model for your application. It is based on the GRC-20 specification and allows you to define Types with properties and relations to other Types.
 
+TODO update this doc
+
 ## Example
 
 Here is an example of a schema for an Event app with the properties `name` and `description`.

packages/hypergraph-react/src/internal/use-create-entity-public.ts

@@ -1,6 +1,6 @@
 import { Graph, Id, type PropertiesParam, type RelationsParam } from '@graphprotocol/grc-20';
 import type { Connect, Entity } from '@graphprotocol/hypergraph';
-import { store, Type } from '@graphprotocol/hypergraph';
+import { store, TypeUtils } from '@graphprotocol/hypergraph';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSelector } from '@xstate/store/react';
 import type * as Schema from 'effect/Schema';
@@ -33,14 +33,20 @@ export function useCreateEntityPublic<const S extends Entity.AnyNoContext>(
       const fields = type.fields;
       const values: PropertiesParam = [];
       for (const [key, value] of Object.entries(mappingEntry.properties || {})) {
+        if (data[key] === undefined) {
+          if (TypeUtils.isOptional(fields[key])) {
+            continue;
+          }
+          throw new Error(`Value for ${key} is undefined`);
+        }
         let serializedValue: string = data[key];
-        if (fields[key] === Type.Checkbox) {
+        if (TypeUtils.isCheckboxOrOptionalCheckboxType(fields[key])) {
           serializedValue = Graph.serializeCheckbox(data[key]);
-        } else if (fields[key] === Type.Date) {
+        } else if (TypeUtils.isDateOrOptionalDateType(fields[key])) {
           serializedValue = Graph.serializeDate(data[key]);
-        } else if (fields[key] === Type.Point) {
+        } else if (TypeUtils.isPointOrOptionalPointType(fields[key])) {
           serializedValue = Graph.serializePoint(data[key]);
-        } else if (fields[key] === Type.Number) {
+        } else if (TypeUtils.isNumberOrOptionalNumberType(fields[key])) {
           serializedValue = Graph.serializeNumber(data[key]);
         }
 

packages/hypergraph-react/src/internal/use-query-public.tsx

@@ -1,5 +1,5 @@
 import { Graph } from '@graphprotocol/grc-20';
-import { type Entity, store, Type } from '@graphprotocol/hypergraph';
+import { type Entity, store, TypeUtils } from '@graphprotocol/hypergraph';
 import type { Mapping, MappingEntry } from '@graphprotocol/typesync/Mapping';
 import { useQuery as useQueryTanstack } from '@tanstack/react-query';
 import { useSelector } from '@xstate/store/react';
@@ -154,16 +154,16 @@ const convertPropertyValue = (
   key: string,
   type: Entity.AnyNoContext,
 ) => {
-  if (type.fields[key] === Type.Checkbox) {
+  if (TypeUtils.isCheckboxOrOptionalCheckboxType(type.fields[key]) && property.value !== undefined) {
     return Boolean(property.value);
   }
-  if (type.fields[key] === Type.Point) {
+  if (TypeUtils.isPointOrOptionalPointType(type.fields[key]) && property.value !== undefined) {
     return property.value;
   }
-  if (type.fields[key] === Type.Date) {
+  if (TypeUtils.isDateOrOptionalDateType(type.fields[key]) && property.value !== undefined) {
     return property.value;
   }
-  if (type.fields[key] === Type.Number) {
+  if (TypeUtils.isNumberOrOptionalNumberType(type.fields[key]) && property.value !== undefined) {
     return Number(property.value);
   }
   return property.value;