@instantdb/components 0.0.1

package/src/schema.ts

@@ -0,0 +1,285 @@
+import { DBAttr, SchemaAttr, SchemaNamespace } from '@lib/types';
+import { InstantDBAttr } from '@instantdb/core';
+import { InstantAPIPlatformSchema } from '@instantdb/platform';
+
+// We show most attrs in the explorer except for some system attrs
+function isVisibleAttr(attr: DBAttr) {
+  const [, namespace, label] = attr['forward-identity'];
+  return (
+    attr.catalog !== 'system' ||
+    namespace === '$users' ||
+    namespace === '$files'
+  );
+}
+
+export function dbAttrsToExplorerSchema(
+  rawAttrs: Record<string, DBAttr>,
+): SchemaNamespace[] {
+  const nsMap: Record<
+    string,
+    { id: string; name: string; attrs: Record<string, SchemaAttr> }
+  > = {};
+
+  const oAttrs: Record<string, DBAttr> = {};
+  for (const [id, attrDesc] of Object.entries(rawAttrs)) {
+    if (!isVisibleAttr(attrDesc)) {
+      continue;
+    }
+    oAttrs[id] = attrDesc;
+  }
+
+  for (const attrDesc of Object.values(oAttrs)) {
+    const [, namespace] = attrDesc['forward-identity'];
+
+    if (nsMap[namespace]) {
+      continue;
+    }
+
+    nsMap[namespace] = { id: namespace, name: namespace, attrs: {} };
+  }
+
+  for (const attrDesc of Object.values(oAttrs)) {
+    const linkConfig = {
+      forward: {
+        id: attrDesc['forward-identity'][0],
+        namespace: attrDesc['forward-identity'][1],
+        attr: attrDesc['forward-identity'][2],
+        nsMap: nsMap[attrDesc['forward-identity'][1]],
+      },
+      reverse: attrDesc['reverse-identity']
+        ? {
+            id: attrDesc['reverse-identity'][0],
+            namespace: attrDesc['reverse-identity'][1],
+            attr: attrDesc['reverse-identity'][2],
+            nsMap: nsMap[attrDesc['reverse-identity'][1]],
+          }
+        : undefined,
+    };
+
+    if (attrDesc['forward-identity']) {
+      const [fwdId, ns, attr, fwdIndexed] = attrDesc['forward-identity'];
+      const id = attrDesc.id + '-forward';
+
+      if (fwdIndexed !== false) {
+        nsMap[ns].attrs[id] = {
+          id: attrDesc.id,
+          isForward: true,
+          namespace: ns,
+          name: attr,
+          type: attrDesc['value-type'],
+          isIndex: attrDesc['index?'],
+          isUniq: attrDesc['unique?'],
+          isRequired: attrDesc['required?'],
+          isPrimary: attrDesc['primary?'],
+          cardinality: attrDesc.cardinality,
+          linkConfig,
+          inferredTypes: attrDesc['inferred-types'],
+          catalog: attrDesc.catalog,
+          checkedDataType: attrDesc['checked-data-type'],
+          sortable: attrDesc['index?'] && !!attrDesc['checked-data-type'],
+          onDelete: attrDesc['on-delete'],
+          onDeleteReverse: attrDesc['on-delete-reverse'],
+        };
+      }
+    }
+
+    if (!attrDesc['reverse-identity']) {
+      continue;
+    }
+
+    const [revId, revNs, revAttr, revIndexed] = attrDesc['reverse-identity'];
+
+    // TODO: sometimes reverse-identity doesn't correspond to a real namespace
+    if (nsMap[revNs] && revIndexed !== false) {
+      const idr = attrDesc.id + '-reverse';
+      nsMap[revNs].attrs[idr] = {
+        id: attrDesc.id,
+        isForward: false,
+        namespace: revNs,
+        name: revAttr,
+        type: attrDesc['value-type'],
+        isIndex: attrDesc['index?'],
+        isUniq: attrDesc['unique?'],
+        isRequired: attrDesc['required?'],
+        cardinality: attrDesc.cardinality,
+        linkConfig,
+        sortable: attrDesc['index?'] && !!attrDesc['checked-data-type'],
+        onDelete: attrDesc['on-delete'],
+        onDeleteReverse: attrDesc['on-delete-reverse'],
+        catalog: attrDesc.catalog,
+        checkedDataType: attrDesc['checked-data-type'],
+      };
+    }
+  }
+
+  const namespaces = Object.values(nsMap)
+    .map((ns) => ({
+      ...ns,
+      attrs: Object.values(ns.attrs).sort(nameComparator),
+    }))
+    .sort(nameComparator);
+
+  return namespaces;
+}
+
+function nameComparator(a: { name: string }, b: { name: string }) {
+  if (a.name === 'id') return -1;
+  if (b.name === 'id') return 1;
+
+  if (a.name < b.name) {
+    return -1;
+  }
+  if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+}
+
+// attrsToSchema
+// Converts attrs to the instant API schema format
+// Make sure any changes here match changes to instant.model.schema in Clojure
+
+// Helpers
+
+const FILES_URL_AID = '96653230-13ff-ffff-2a35-48afffffffff';
+
+function dbAttrToInstantDBAttr(attr: DBAttr): InstantDBAttr {
+  return {
+    ...attr,
+    'required?': attr['required?'] ?? false,
+    'inferred-types': attr['inferred-types'] ?? null,
+    catalog: attr['catalog'] ?? 'user',
+    'forward-identity': [
+      attr['forward-identity'][0],
+      attr['forward-identity'][1],
+      attr['forward-identity'][2],
+    ],
+    'reverse-identity': attr['reverse-identity']
+      ? [
+          attr['reverse-identity'][0],
+          attr['reverse-identity'][1],
+          attr['reverse-identity'][2],
+        ]
+      : undefined,
+  };
+}
+
+// Transform $files.url attribute to mark it as required
+function transformFilesUrlAttr(attr: DBAttr) {
+  // $files.url is a derived attribute that we always return from queries.
+  // It does not exist inside our database, so it's marked as optional.
+  // However, to our users, it's seen as a required attribute, since we always
+  // provide it.
+  if (attr.id === FILES_URL_AID) {
+    return { ...attr, required: true };
+  }
+  return attr;
+}
+
+// Remove hidden system attributes
+function removeHidden(attrs: DBAttr[]) {
+  return attrs.filter((attr) => {
+    const catalog = attr.catalog;
+    const fwdEtype = getFwdEtype(attr);
+    const fwdLabel = getFwdLabel(attr);
+
+    // Remove system attrs except $users and $files
+    if (catalog === 'system' && !['$users', '$files'].includes(fwdEtype)) {
+      return false;
+    }
+
+    // Remove specific $files attributes
+    if (
+      fwdEtype === '$files' &&
+      [
+        'content-type',
+        'content-disposition',
+        'size',
+        'location-id',
+        'key-version',
+      ].includes(fwdLabel)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
+function getFwdEtype(attr: DBAttr) {
+  return attr['forward-identity'][1];
+}
+
+function getFwdLabel(attr: DBAttr) {
+  return attr['forward-identity'][2];
+}
+
+// Make sure any changes here match changes to instant.model.schema in Clojure
+// Converts attrs to the instant API schema format
+export function attrsToSchema(attrs: DBAttr[]): InstantAPIPlatformSchema {
+  const filteredAttrs = removeHidden(attrs).map(transformFilesUrlAttr);
+
+  const grouped = filteredAttrs.reduce(
+    (acc: { ref: DBAttr[]; blob: DBAttr[] }, attr) => {
+      const valueType = attr['value-type'];
+      if (!acc[valueType]) {
+        acc[valueType] = [];
+      }
+      acc[valueType].push(attr);
+      return acc;
+    },
+    { ref: [], blob: [] },
+  );
+
+  const blobs = grouped.blob || [];
+  const refs = grouped.ref || [];
+
+  const refsIndexed: InstantAPIPlatformSchema['refs'] = refs.reduce(
+    (acc: InstantAPIPlatformSchema['refs'], attr) => {
+      const {
+        'forward-identity': forwardIdentity,
+        'reverse-identity': reverseIdentity,
+      } = attr;
+      const key = JSON.stringify([
+        forwardIdentity[1],
+        forwardIdentity[2],
+        reverseIdentity?.[1],
+        reverseIdentity?.[2],
+      ]);
+      acc[key] = dbAttrToInstantDBAttr(attr);
+      return acc;
+    },
+    {},
+  );
+
+  const blobsGrouped: Record<string, DBAttr[]> = blobs.reduce(
+    (acc: Record<string, DBAttr[]>, blob) => {
+      const entityType = getFwdEtype(blob);
+      if (!acc[entityType]) {
+        acc[entityType] = [];
+      }
+      acc[entityType].push(blob);
+      return acc;
+    },
+    {},
+  );
+
+  const blobsIndexed: InstantAPIPlatformSchema['blobs'] = Object.entries(
+    blobsGrouped,
+  ).reduce((acc: InstantAPIPlatformSchema['blobs'], [entityType, attrs]) => {
+    acc[entityType] = attrs.reduce(
+      (attrMap: Record<string, InstantDBAttr>, attr) => {
+        const attrName = attr['forward-identity'][2];
+        attrMap[attrName] = dbAttrToInstantDBAttr(attr);
+        return attrMap;
+      },
+      {},
+    );
+    return acc;
+  }, {});
+
+  return {
+    refs: refsIndexed,
+    blobs: blobsIndexed,
+  };
+}

package/src/style.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@custom-variant dark (&:where(.dark, .dark *));

package/src/types.ts

@@ -0,0 +1,359 @@
+export type RelationshipKinds =
+  | `many-many`
+  | 'one-one'
+  | 'one-many'
+  | 'many-one';
+
+export const relationshipConstraints: Record<
+  RelationshipKinds,
+  { cardinality: 'one' | 'many'; 'unique?': boolean }
+> = {
+  /**
+   * users has_many tags
+   * tags has_many users
+   */
+  'many-many': {
+    cardinality: 'many',
+    'unique?': false,
+  },
+  /**
+   * users has_one profile
+   * profiles has_one owner
+   */
+  'one-one': {
+    cardinality: 'one',
+    'unique?': true,
+  },
+  /**
+   *  users has_many posts
+   *  posts has_one author
+   *  [?users :users/posts ?posts]
+   *          <--------------->  unique!
+   */
+  'many-one': {
+    cardinality: 'many',
+    'unique?': true,
+  },
+
+  /**
+   *  posts has_one owner
+   *  users has_many owned_posts
+   *  [?posts :posts/user ?users]
+   *   <--------------->  unique!
+   */
+  'one-many': {
+    cardinality: 'one',
+    'unique?': false,
+  },
+};
+
+export const relationshipConstraintsInverse: Record<string, RelationshipKinds> =
+  Object.fromEntries(
+    Object.entries(relationshipConstraints).map(([k, v]) => [
+      `${v.cardinality}-${v['unique?']}`,
+      k as RelationshipKinds,
+    ]),
+  );
+// COPIED FROM www/lib/types!!!!!!!!!!! LOOK OUT
+
+import { InstantIssue } from '@instantdb/core';
+
+export type InstantApp = {
+  id: string;
+  pro: boolean;
+  title: string;
+  created_at: string;
+  admin_token: string;
+  rules: object | null;
+  user_app_role: 'owner' | 'admin' | 'collaborator';
+  members: InstantMember[] | null;
+  invites: InstantAppInvite | null;
+  magic_code_email_template: {
+    id: string;
+    name: string;
+    email?: string;
+    body: string;
+    subject: string;
+  } | null;
+  org: { id: string; title: string } | null;
+};
+
+export type InstantMember = {
+  id: string;
+  email: string;
+  role: 'admin' | 'collaborator';
+};
+
+type InstantMemberInvite = {
+  id: string;
+  type: 'app' | 'org';
+  foreign_key: string;
+  title: string;
+  invitee_role: 'admin' | 'collaborator' | 'owner';
+  inviter_email: string;
+};
+
+export type InstantAppInvite = {
+  id: string;
+  email: string;
+  status: 'pending' | 'accepted' | 'revoked';
+  role: 'admin' | 'collaborator';
+  sent_at: string;
+  expired: boolean;
+}[];
+
+export type InstantIndexingJobInvalidTriple = {
+  entity_id: string;
+  value: any;
+  json_type:
+    | 'string'
+    | 'number'
+    | 'boolean'
+    | 'null'
+    | 'object'
+    | 'array'
+    | 'date';
+};
+export type InstantIndexingJob = {
+  id: string;
+  app_id: string;
+  attr_id: string;
+  job_type:
+    | 'remove-data-type'
+    | 'check-data-type'
+    | 'index'
+    | 'remove-index'
+    | 'unique'
+    | 'remove-unique'
+    | 'required'
+    | 'remove-required'
+    | string;
+  job_status: 'completed' | 'waiting' | 'processing' | 'errored' | string;
+  job_stage: string;
+  work_estimate: number | null | undefined;
+  work_completed: number | null | undefined;
+  error:
+    | 'invalid-triple-error'
+    | 'invalid-attr-state-error'
+    | 'triple-not-unique-error'
+    | 'triple-too-large-error'
+    | 'missing-required-error'
+    | 'unexpected-error'
+    | string
+    | null
+    | undefined;
+  error_data?: {
+    count: number;
+    'entity-ids': number[];
+  };
+  checked_data_type: CheckedDataType | null | undefined;
+  created_at: string;
+  updated_at: string;
+  done_at: string;
+  invalid_unique_value: any;
+  invalid_triples_sample: InstantIndexingJobInvalidTriple[] | null | undefined;
+};
+
+export type OrgSummary = {
+  id: string;
+  title: string;
+  created_at: string;
+  role: 'owner' | 'admin' | 'collaborator' | 'app-member';
+  paid: boolean;
+};
+
+export type DashResponse = {
+  apps: InstantApp[];
+  invites?: InstantMemberInvite[];
+  user: {
+    email: string;
+    id: string;
+  };
+  orgs?: OrgSummary[];
+};
+
+export type AppError = { body: { message: string } | undefined };
+
+export type AuthorizedOriginService =
+  | 'generic'
+  | 'vercel'
+  | 'netlify'
+  | 'custom-scheme';
+
+export type AuthorizedOrigin = {
+  id: string;
+  service: AuthorizedOriginService;
+  params: string[];
+};
+
+export type OAuthServiceProvider = {
+  id: string;
+  provider_name: string;
+};
+
+export type OAuthClient = {
+  id: string;
+  client_name: string;
+  client_id?: string;
+  provider_id: string;
+  authorization_endpoint?: string;
+  token_endpoint?: string;
+  discovery_endpoint?: string;
+  meta?: any;
+};
+
+export type AppsAuthResponse = {
+  authorized_redirect_origins: AuthorizedOrigin[] | null | undefined;
+  oauth_service_providers: OAuthServiceProvider[] | null | undefined;
+  oauth_clients: OAuthClient[] | null | undefined;
+};
+
+export type SubscriptionName = 'Free' | 'Pro';
+
+export type AppsSubscriptionResponse = {
+  'subscription-name': SubscriptionName;
+  'total-app-bytes': number;
+  'total-storage-bytes': number;
+};
+
+export type DBIdent =
+  | [string, string, string]
+  | [string, string, string, boolean];
+
+export type CheckedDataType = 'string' | 'number' | 'boolean' | 'date';
+
+export interface DBAttr {
+  id: string;
+  'forward-identity': DBIdent;
+  'reverse-identity'?: DBIdent;
+  'index?': boolean;
+  'unique?': boolean;
+  'required?'?: boolean;
+  'primary?'?: boolean | undefined;
+  cardinality: 'one' | 'many';
+  'value-type': 'ref' | 'blob';
+  'inferred-types'?: Array<'string' | 'number' | 'boolean' | 'json'>;
+  catalog?: 'user' | 'system';
+  'checked-data-type'?: CheckedDataType;
+  'on-delete'?: 'cascade';
+  'on-delete-reverse'?: 'cascade';
+  metadata?: any;
+}
+
+export interface SchemaNamespace {
+  id: string;
+  name: string;
+  attrs: SchemaAttr[];
+}
+
+export interface SchemaNamespaceMap {
+  id: string;
+  name: string;
+  attrs: Record<string, SchemaAttr>;
+}
+
+export interface SchemaAttr {
+  id: string;
+  isForward: boolean;
+  namespace: string;
+  name: string;
+  type: 'ref' | 'blob';
+  isIndex: boolean;
+  isUniq: boolean;
+  isRequired?: boolean;
+  isPrimary?: boolean | undefined;
+  cardinality: 'one' | 'many';
+  linkConfig: {
+    forward: {
+      id: string;
+      namespace: string;
+      attr: string;
+      nsMap: SchemaNamespaceMap;
+    };
+    reverse:
+      | {
+          id: string;
+          namespace: string;
+          attr: string;
+          nsMap: SchemaNamespaceMap;
+        }
+      | undefined;
+  };
+  inferredTypes?: Array<'string' | 'number' | 'boolean' | 'json'>;
+  catalog?: 'user' | 'system';
+  checkedDataType?: CheckedDataType;
+  sortable: boolean;
+  onDelete?: 'cascade';
+  onDeleteReverse?: 'cascade';
+}
+
+export type OAuthAppClientSecret = {
+  id: string;
+  clientId: string;
+  firstFour: string;
+  createdAt: string;
+};
+
+export type OAuthAppClient = {
+  clientId: string;
+  oauthAppId: string;
+  clientName: string;
+  authorizedRedirectUrls: string[] | null;
+  clientSecrets: OAuthAppClientSecret[] | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type OAuthApp = {
+  id: string;
+  appId: string;
+  appName: string;
+  grantedScopes: string[];
+  isPublic: boolean;
+  supportEmail: string | null;
+  appHomePage: string | null;
+  appPrivacyPolicyLink: string | null;
+  appTosLink: string | null;
+  appLogo: string | null;
+  clients: OAuthAppClient[] | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type OAuthAppsResponse = {
+  apps: OAuthApp[];
+};
+
+// re-export InstantIssue from the core library
+export { type InstantIssue };
+
+export type HasDefault<T> = {
+  user: T | undefined;
+  parsed: T;
+};
+
+export type WithOptional<O extends object> = Expand<
+  {
+    [K in keyof O as O[K] extends HasDefault<any> ? never : K]: O[K];
+  } & {
+    [K in keyof O as O[K] extends HasDefault<any>
+      ? K
+      : never]?: O[K] extends HasDefault<infer B> ? B : never;
+  }
+>;
+
+export type BuiltIn = Date | Function | Error | RegExp;
+
+export type Primitive = string | number | boolean | symbol | null | undefined;
+
+export type Expand<T> = T extends BuiltIn | Primitive
+  ? T
+  : T extends object
+    ? T extends infer O
+      ? { [K in keyof O]: Expand<O[K]> }
+      : never
+    : T;
+
+export type WithDefaults<O extends Object> = Expand<{
+  [K in keyof O]: O[K] extends HasDefault<infer B> ? B : O[K];
+}>;

package/src/utils/format.ts

@@ -0,0 +1,13 @@
+export function formatBytes(bytes: number) {
+  const units = ['bytes', 'kb', 'mb', 'gb', 'tb', 'pb', 'eb', 'zb', 'yb'];
+  let index = 0;
+
+  if (!bytes) return '0 bytes';
+
+  while (bytes >= 1024 && index < units.length - 1) {
+    bytes /= 1024;
+    index++;
+  }
+
+  return bytes.toFixed(2) + ' ' + units[index];
+}