@monimesl/dot-cli 0.1.0-alpha.9 → 1.0.0-beta.0

package/dist/templates/showcase/pages/dash/calls/view.dml

@@ -0,0 +1,69 @@
+<View>
+  <Text variant="title">Calls and errors</Text>
+  <Text>Every this.dash call goes to Dash and comes back later, so await it. When it fails, it throws a DashError with a code that says why.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">timeout</Text>
+    <Text variant="caption" tone="muted">The last argument of a call can set a timeout, in milliseconds. This waits 5 seconds with a timeout of 1.</Text>
+    <Button variant="secondary" data-call="timeout" onClick="show">Wait too long</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">cancel</Text>
+    <Text variant="caption" tone="muted">A call can be cancelled while it runs. Calls still running when the page closes are cancelled for you.</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" data-call="cancelled" onClick="show" disabled="{{ waiting }}">Wait 10 seconds</Button>
+      <Button variant="secondary" onClick="cancelWait" disabled="{{ !waiting }}">Cancel</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DashError codes</Text>
+    <Text variant="caption" tone="muted">isDashError(error) tells a Dash call's error from any other, and isDashError(error, 'timeout') also checks its code.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="cancelled" value="The person closed it, or the call was cancelled" />
+      <DetailRow label="timeout" value="It took longer than the timeout" />
+      <DetailRow label="denied" value="Not allowed, such as a missing permission" />
+      <DetailRow label="invalid" value="The call's options are wrong" />
+      <DetailRow label="unsupported" value="This Dash can't do it" />
+      <DetailRow label="missing" value="There's nothing there, such as a file that isn't saved" />
+      <DetailRow label="failed" value="Anything else went wrong" />
+    </View>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-call="invalid" onClick="show">Pick a date between bad limits</Button>
+      <Button variant="secondary" data-call="denied" onClick="show">Reach an unlisted host</Button>
+      <Button variant="secondary" data-call="missing" onClick="show">Read a file never saved</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">supports</Text>
+    <Text variant="caption" tone="muted">Each call's docs say which Dash API version it came in, and dot.json's dash.minApiVersion says which one the dot needs. To use a newer call and still open on older Dash, check this.dash.supports first.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="This Dash offers" value="Dash API {{ apiVersions }}" />
+      <DetailRow label="contacts.pickPhone" value="{{ picksPhones ? 'Supported' : 'Not on this Dash' }}" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">dash.dot.close</Text>
+    <Text variant="caption" tone="muted">Closes the dot, as going back from its first page does, such as once a payment is done.</Text>
+    <Button variant="secondary" onClick="closeDot">Close the showcase</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The last call</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code }}">
+        <DetailRow label="error.code" value="{{ code }}" weight="bold" />
+        <DetailRow label="error.message" value="{{ message }}" />
+      </If>
+      <ElseIf condition="{{ waiting }}">
+        <Text tone="muted">Waiting…</Text>
+      </ElseIf>
+      <Else>
+        <Text tone="muted">Use a button above</Text>
+      </Else>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/contacts/controller.ts

@@ -0,0 +1,30 @@
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Contacts' } },
+  actions: {
+    async choose() {
+      try {
+        const contact = await unlessCancelled(this.dash.contacts.pickPhone());
+        if (contact) {
+          this.setState({ contact, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async call(state) {
+      if (!state.contact) {
+        return;
+      }
+      try {
+        await this.dash.system.dial(state.contact.phone);
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/contacts/state.ts

@@ -0,0 +1,6 @@
+import type { PickedContact } from '@monimesl/dot-runtime';
+
+export default {
+  contact: null as PickedContact | null,
+  note: '',
+};

package/dist/templates/showcase/pages/dash/contacts/view.dml

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.contacts</Text>
+  <Text>The phone's own contacts. The dot sees only the one the person chooses.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhone</Text>
+    <Text variant="caption" tone="muted">The person chooses one phone number, such as who to send money to. It needs the contacts permission in dot.json.</Text>
+    <View variant="card" gap="medium">
+      <If condition="{{ contact }}">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ contact.name }}" />
+          <View grow gap="none">
+            <Text weight="medium">{{ contact.name || 'No name' }}</Text>
+            <Text variant="caption" tone="muted">{{ contact.phone }}</Text>
+          </View>
+        </View>
+        <View direction="row" gap="small">
+          <Button variant="secondary" onClick="choose">Choose another</Button>
+          <Button variant="secondary" onClick="call">Call</Button>
+        </View>
+      </If>
+      <Else>
+        <EmptyState icon="users" title="No one chosen" text="Choose a contact to send money to.">
+          <Button onClick="choose">Choose a contact</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

package/dist/templates/showcase/pages/dash/crypto/controller.ts

@@ -0,0 +1,38 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Crypto' } },
+  mutations: {
+    setText: (_state, event: ValueEvent) => ({ text: event.detail.value }),
+    setKey: (_state, event: ValueEvent) => ({ key: event.detail.value }),
+    // dash.utils answers at once, so even a mutation can use it.
+    encode: (state) => ({ encoded: dash.utils.base64.encode(state.text) }),
+  },
+  actions: {
+    async hash(state) {
+      try {
+        const sha256 = await this.dash.crypto.sha256(state.text);
+        const hmac = await this.dash.crypto.hmac({
+          algorithm: 'sha256',
+          key: state.key,
+          data: state.text,
+        });
+        this.setState({ sha256, hmac, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async makeRandom() {
+      try {
+        const random = await this.dash.crypto.randomBytes(16);
+        const uuid = await this.dash.crypto.randomUUID();
+        this.setState({ random, uuid, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/crypto/state.ts

@@ -0,0 +1,10 @@
+export default {
+  text: 'Salone Sounds Live, Freetown',
+  key: 'shared secret',
+  sha256: '',
+  hmac: '',
+  random: '',
+  uuid: '',
+  encoded: '',
+  note: '',
+};

package/dist/templates/showcase/pages/dash/crypto/view.dml

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.crypto</Text>
+  <Text>Hashes, signatures and random values, worked out on the phone. Each gives hex, or base64 with { as: 'base64' }.</Text>
+
+  <View variant="card" gap="medium">
+    <Input label="Text" value="{{ text }}" onChange="setText" />
+    <Input label="HMAC key" value="{{ key }}" onChange="setKey" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">sha256 and hmac</Text>
+    <Text variant="caption" tone="muted">sha512 works the same way. hmac signs with a key, such as to check a message from the dot's own server.</Text>
+    <Button variant="secondary" onClick="hash">Hash and sign the text</Button>
+    <If condition="{{ sha256 }}">
+      <View variant="card" gap="none">
+        <DetailRow label="sha256" value="{{ sha256 }}" />
+        <DetailRow label="hmac sha256" value="{{ hmac }}" />
+      </View>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">randomBytes and randomUUID</Text>
+    <Text variant="caption" tone="muted">From the phone's secure random source, such as for a nonce.</Text>
+    <Button variant="secondary" onClick="makeRandom">Make random values</Button>
+    <If condition="{{ uuid }}">
+      <View variant="card" gap="none">
+        <DetailRow label="16 random bytes" value="{{ random }}" />
+        <DetailRow label="randomUUID" value="{{ uuid }}" />
+      </View>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">dash.utils</Text>
+    <Text variant="caption" tone="muted">Not Dash calls: dash.utils.base64 and dash.utils.hex run in the dot and answer at once, without await, for UTF-8 text.</Text>
+    <Button variant="secondary" onClick="encode">Encode the text</Button>
+    <If condition="{{ encoded }}">
+      <View variant="card" gap="none">
+        <DetailRow label="utils.base64.encode" value="{{ encoded }}" />
+      </View>
+    </If>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

package/dist/templates/showcase/pages/{files → dash/files}/controller.ts

@@ -5,13 +5,14 @@ const PICTURE = 'pictures/artwork.jpg';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Files' } },
   hooks: {
     async onShow() {
       await this.actions.refresh();
     },
   },
   mutations: {
-    setDraft: (_state, event: DotEvent<{ value: string }>) => ({ draft: event.detail.value }),
+    setDraft: (_state, event: ValueEvent) => ({ draft: event.detail.value }),
   },
   actions: {
     async refresh() {
@@ -29,11 +30,15 @@ export default definePage({
           time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
         }))
         .reverse();
+      const documents = entries.filter(
+        (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
+      );
       const { used, quota } = await this.dash.storage.file.usage();
       const kept = await this.dash.storage.file.stat(PICTURE);
       this.setState({
         songs,
         archives,
+        documents,
         usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
         picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
       });
@@ -50,7 +55,7 @@ export default definePage({
       await this.actions.refresh();
     },
     // Copies an archived setlist back, in place of the current one.
-    async copyBack(_state, event: DotEvent<unknown, { path: string }>) {
+    async copyBack(_state, event: DataEvent<{ path: string }>) {
       await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
       await this.actions.refresh();
     },

package/dist/templates/showcase/pages/{files → dash/files}/state.ts

@@ -1,3 +1,5 @@
+import type { FileEntry } from '@monimesl/dot-runtime';
+
 export interface Archive {
   path: string;
   // When it was archived, from its folder's name.
@@ -16,4 +18,6 @@ export default {
   archives: [] as Archive[],
   usage: '',
   picture: '',
+  // Files saved into the dot's documents folder, such as a ticket from the dash.media page.
+  documents: [] as FileEntry[],
 };

package/dist/templates/showcase/pages/dash/files/view.dml

@@ -0,0 +1,78 @@
+<View>
+  <Text variant="title">dash.storage.file</Text>
+  <Text>Each dot has its own folder on the phone. Other dots can't see it, and its files stay after the dot closes.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">write, read and list</Text>
+    <Text variant="caption" tone="muted">A setlist, where each song is a text file. Add some, then close and reopen the dot: they are still here.</Text>
+    <View variant="card" gap="small">
+      <Input label="Song" placeholder="Exodus, by Drizilik" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
+      <View direction="row" gap="small" wrap>
+        <Button onClick="save" disabled="{{ !draft }}">Add to the setlist</Button>
+        <Button variant="secondary" onClick="archive" disabled="{{ songs.length === 0 }}">Archive it</Button>
+        <Button variant="secondary" onClick="clearSetlist" disabled="{{ songs.length === 0 }}">Clear it</Button>
+      </View>
+      <For each="{{ songs }}" item="song" key="path">
+        <View gap="none">
+          <Text>{{ song.text }}</Text>
+          <Text variant="caption" tone="muted">{{ song.path }}</Text>
+        </View>
+      </For>
+      <If condition="{{ songs.length === 0 }}">
+        <Text variant="caption" tone="muted">No songs yet</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">createFolder, move, copy and remove</Text>
+    <Text variant="caption" tone="muted">Archive it moves the setlist folder into archive/. Tap an archived setlist to copy it back. Clear it removes the folder and all in it.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ archives.length > 0 }}">
+        <List>
+          <For each="{{ archives }}" item="archive" key="path">
+            <ListItem icon="playlist" title="Archived at {{ archive.time }}" subtitle="{{ archive.path }}" value="Copy back" data-path="{{ archive.path }}" onTap="copyBack" />
+          </For>
+        </List>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">None yet. Add songs, then archive the setlist.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">save</Text>
+    <Text variant="caption" tone="muted">A picked photo or file, or a download, goes when the dot closes. save copies it into the dot's folder to keep it. These are the tickets kept on the dash.media page.</Text>
+    <View variant="card" gap="small">
+      <For each="{{ documents }}" item="document" key="path">
+        <View gap="none">
+          <Text>{{ document.name }}</Text>
+          <Text variant="caption" tone="muted">{{ document.path }}</Text>
+        </View>
+      </For>
+      <If condition="{{ documents.length === 0 }}">
+        <Text variant="caption" tone="muted">None yet. On the dash.media page, attach a ticket and tap Keep it.</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">stat and open</Text>
+    <Text variant="caption" tone="muted">stat tells whether a file is there. open gives an address to show it with. This is the artwork kept on the dash.network page.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ picture }}">
+        <Image src="{{ picture }}" alt="Kept artwork" width="64" height="64" />
+        <Button variant="secondary" onClick="forgetPicture">Forget it</Button>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">None yet. On the dash.network page, search, download the artwork and tap Keep.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">usage</Text>
+    <Text>{{ usage }}</Text>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/media/controller.ts

@@ -0,0 +1,65 @@
+import type { PhotoSource } from '@monimesl/dot-runtime';
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Photos, files and scanning' } },
+  // unlessCancelled gives undefined when the person closes the picker or scanner.
+  actions: {
+    async pickPhoto(_state, event: DataEvent<{ source: PhotoSource }>) {
+      try {
+        const photo = await unlessCancelled(
+          this.dash.media.pickPhoto({ source: event.data.source }),
+        );
+        if (!photo) {
+          return;
+        }
+        const details = `${photo.name}, ${Math.round(photo.size / 1024)} KB as a JPEG`;
+        this.setState({ photo, photoDetails: details, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async pickTicket() {
+      try {
+        const ticket = await unlessCancelled(
+          this.dash.media.pickFile({ types: ['application/pdf', 'image/*'] }),
+        );
+        if (!ticket) {
+          return;
+        }
+        const ticketSize = `${Math.round(ticket.size / 1024)} KB`;
+        this.setState({ ticket, ticketSize, ticketKept: false, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    // A picked file goes when the dot closes, so it's saved into the dot's own folder.
+    async keepTicket(state) {
+      if (!state.ticket) {
+        return;
+      }
+      try {
+        await this.dash.storage.file.createFolder('documents');
+        await this.dash.storage.file.save(state.ticket, `documents/${state.ticket.name}`, {
+          overwrite: true,
+        });
+        this.setState({ ticketKept: true, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async scanTicket() {
+      try {
+        const scanned = await unlessCancelled(this.dash.media.scanCode());
+        if (scanned) {
+          this.setState({ scanned: scanned.text, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/media/state.ts

@@ -0,0 +1,12 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export default {
+  photo: null as DotFile | null,
+  photoDetails: '',
+  ticket: null as DotFile | null,
+  ticketSize: '',
+  // Whether the ticket was saved into the dot's documents folder.
+  ticketKept: false,
+  scanned: '',
+  note: '',
+};

package/dist/templates/showcase/pages/dash/media/view.dml

@@ -0,0 +1,53 @@
+<View>
+  <Text variant="title">dash.media</Text>
+  <Text>Photos, files and codes from the phone. Each needs a permission in dot.json, which Dash asks the person for the first time.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhoto</Text>
+    <Text variant="caption" tone="muted">source="library" needs the photoLibrary permission, and source="camera" the camera one. The photo comes back as a JPEG file.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" data-source="library" onClick="pickPhoto">Choose a photo</Button>
+        <Button variant="secondary" data-source="camera" onClick="pickPhoto">Take a photo</Button>
+      </View>
+      <If condition="{{ photo }}">
+        <Image src="{{ photo.url }}" alt="The photo you picked" aspect="4:3" fit="contain" />
+        <Text variant="caption" tone="muted">{{ photoDetails }}. It goes when the dot closes, unless the dot saves it with dash.storage.file.save.</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pickFile</Text>
+    <Text variant="caption" tone="muted">Lets the person choose a file from the phone, of at most 25 MB, with the files permission. types narrows what they can choose, here a PDF or a picture. Like a photo, it goes when the dot closes, so keep it with dash.storage.file.save.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="pickTicket">Attach your concert ticket</Button>
+      <If condition="{{ ticket }}">
+        <DetailRow label="Name" value="{{ ticket.name }}" />
+        <DetailRow label="Size" value="{{ ticketSize }}" />
+        <DetailRow label="Type" value="{{ ticket.contentType }}" />
+        <If condition="{{ ticketKept }}">
+          <Text variant="caption" tone="success">Kept in documents/. The dash.storage.file page lists it.</Text>
+        </If>
+        <Else>
+          <Button variant="secondary" onClick="keepTicket">Keep it</Button>
+        </Else>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">scanCode</Text>
+    <Text variant="caption" tone="muted">Opens Dash's scanner until it reads a QR code. It needs the camera permission.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="scanTicket">Scan a ticket's QR code</Button>
+      <If condition="{{ scanned }}">
+        <Text>{{ scanned }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>