@monimesl/dot-cli 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/template/.env

@@ -1,3 +1,3 @@
-# Public configuration for the dot. Only DOT_PUBLIC_ variables reach it, and anyone with the dot
-# can read them: never put a secret here. Read them in the service as `env.DOT_PUBLIC_…`.
-DOT_PUBLIC_GREETING=Dash draws this alert, not the dot.
+# Public configuration for the dot. Anyone with the dot can read these variables: never put a
+# secret here. Read them in the service as `env.GREETING`.
+GREETING=This message comes from the dot's .env file.

package/dist/template/dot.ts

@@ -1,6 +1,19 @@
 import { logger } from '@monimesl/dot-runtime';
 
 export default defineDot({
-  pages: ['index', 'help/tips'],
+  pages: [
+    'index',
+    'layout',
+    'text',
+    'images',
+    'lists',
+    'forms',
+    'feedback',
+    'state',
+    'navigation',
+    'device',
+    'network',
+    'files',
+  ],
   plugins: [logger()],
 });

package/dist/template/pages/device/controller.ts

@@ -0,0 +1,70 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async greet() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Hello',
+          message: env.GREETING,
+          actions: [
+            { id: 'nice', label: 'Nice' },
+            { id: 'close', label: 'Close', role: 'cancel' },
+          ],
+        });
+        this.setState({ choice: action });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async confirmDelete() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Delete everything?',
+          message: "This can't be undone.",
+          actions: [
+            { id: 'keep', label: 'Keep', role: 'cancel' },
+            { id: 'delete', label: 'Delete', role: 'destructive' },
+          ],
+        });
+        this.setState({ choice: action });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async vibrate(_state, event: DotEvent<unknown, { style: 'light' | 'success' | 'error' }>) {
+      await this.dash.system.vibrate({ style: event.data.style });
+    },
+    async copyAccount() {
+      await this.dash.system.copyText('AC-2041');
+      this.setState({ toast: 'Account number copied' });
+    },
+    async shareLink() {
+      try {
+        await this.dash.system.share({ title: 'Dot', url: 'https://github.com/monime-lab/dot' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sendCode() {
+      for (let seconds = 10; seconds > 0; seconds--) {
+        this.setState({ resendIn: seconds });
+        await this.dash.system.delay(1000);
+      }
+      this.setState({ resendIn: 0 });
+    },
+    async toggleTorch(state) {
+      const next = state.torch === 'on' ? 'off' : 'on';
+      try {
+        await this.dash.system.torch(next);
+        this.setState({ torch: next, note: '' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+  },
+});

package/dist/template/pages/device/state.ts

@@ -0,0 +1,7 @@
+export default {
+  choice: '',
+  torch: 'off' as 'on' | 'off',
+  note: '',
+  toast: '',
+  resendIn: 0,
+};

package/dist/template/pages/device/view.dml

@@ -0,0 +1,44 @@
+<View>
+  <Text variant="title">Alerts and device</Text>
+  <Text>Dash draws these, not the dot: a dot calls them through the global dash object.</Text>
+
+  <Text variant="caption" tone="muted">dash.ui.alert</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="small">
+      <Button onClick="greet">Say hello</Button>
+      <Button variant="secondary" onClick="confirmDelete">Ask to delete</Button>
+    </View>
+    <If condition="{{ choice }}">
+      <Text>You chose "{{ choice }}"</Text>
+    </If>
+    <Text variant="caption" tone="muted">The hello message is GREETING in the dot's .env file.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.system.vibrate</Text>
+  <View variant="card" direction="row" wrap gap="small">
+    <Button variant="secondary" data-style="light" onClick="vibrate">Light</Button>
+    <Button variant="secondary" data-style="success" onClick="vibrate">Success</Button>
+    <Button variant="secondary" data-style="error" onClick="vibrate">Error</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.system.copyText and dash.system.share</Text>
+  <View variant="card" direction="row" wrap gap="small">
+    <Button variant="secondary" onClick="copyAccount">Copy AC-2041</Button>
+    <Button variant="secondary" onClick="shareLink">Share a link</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.system.delay</Text>
+  <View variant="card">
+    <Button variant="secondary" onClick="sendCode" disabled="{{ resendIn > 0 }}">{{ resendIn > 0 ? 'Resend in ' + resendIn + 's' : 'Send a code' }}</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.system.torch</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Turn the torch on' }}</Button>
+    <If condition="{{ note }}">
+      <Text variant="caption" tone="muted">{{ note }}</Text>
+    </If>
+  </View>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

package/dist/template/pages/feedback/controller.ts

@@ -0,0 +1,16 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    advance: (state) => ({ progress: Math.min(100, state.progress + 20) }),
+    restart: () => ({ progress: 0 }),
+    toggleBusy: (state) => ({ busy: !state.busy }),
+    toggleLoaded: (state) => ({ loaded: !state.loaded }),
+    showToast: (_state, event: DotEvent<unknown, { message: string; tone: string }>) => ({
+      toast: event.data.message,
+      toastTone: event.data.tone,
+    }),
+    clearToast: () => ({ toast: '' }),
+  },
+});

package/dist/template/pages/feedback/state.ts

@@ -0,0 +1,7 @@
+export default {
+  progress: 40,
+  busy: false,
+  loaded: false,
+  toast: '',
+  toastTone: 'default',
+};

package/dist/template/pages/feedback/view.dml

@@ -0,0 +1,87 @@
+<View>
+  <Text variant="title">Feedback</Text>
+  <Text>Show that something is happening, how far along it is, and how it went.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Spinners, while something loads</Text>
+    <View variant="card" direction="row" gap="large" align="center">
+      <Spinner size="small" />
+      <Spinner />
+      <Spinner size="large" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Skeletons, in the shape of what's loading</Text>
+    <View variant="card">
+      <If condition="{{ loaded }}">
+        <View direction="row" align="center" gap="large">
+          <Image src="statics/logo.png" alt="Logo" width="40" height="40" shape="circle" />
+          <View gap="none">
+            <Text weight="medium">Dot Showcase</Text>
+            <Text variant="caption" tone="muted">Loaded, in place of the skeleton</Text>
+          </View>
+        </View>
+        <Image src="statics/logo.png" alt="Banner" width="320" height="80" fit="contain" />
+      </If>
+      <Else>
+        <View direction="row" align="center" gap="large">
+          <Skeleton shape="circle" />
+          <Skeleton lines="2" />
+        </View>
+        <Skeleton shape="box" height="80" />
+      </Else>
+      <Switch label="Loaded" checked="{{ loaded }}" onChange="toggleLoaded" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Toasts, which go away on their own</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" data-message="Saved" data-tone="success" onClick="showToast">Saved</Button>
+      <Button variant="secondary" data-message="You're offline" data-tone="warning" onClick="showToast">Offline</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A progress bar, from 0 to 100</Text>
+    <View variant="card">
+      <ProgressBar value="{{ progress }}" />
+      <Text>{{ progress }}% done</Text>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="advance" disabled="{{ progress >= 100 }}">Advance</Button>
+        <Button variant="secondary" onClick="restart" disabled="{{ progress === 0 }}">Restart</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A button that's busy ignores taps</Text>
+    <View variant="card">
+      <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay Le 50,000' }}</Button>
+      <Switch label="Busy" checked="{{ busy }}" onChange="toggleBusy" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Notices, in the flow of the page</Text>
+    <Notice title="Heads up">Your meter number is on the bill.</Notice>
+    <Notice tone="info" title="New">You can now pay water bills.</Notice>
+    <Notice tone="success" title="Paid">Le 50,000 for electricity.</Notice>
+    <Notice tone="warning" title="Almost out">Your wallet has Le 2,000 left.</Notice>
+    <Notice tone="danger" title="Payment failed">The bank didn't answer. Try again.</Notice>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Badges, for a status</Text>
+    <View direction="row" wrap gap="small">
+      <Badge>Draft</Badge>
+      <Badge tone="info">New</Badge>
+      <Badge tone="success">Paid</Badge>
+      <Badge tone="warning">Pending</Badge>
+      <Badge tone="danger">Failed</Badge>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="{{ toastTone }}" onHide="clearToast" />
+</View>

package/dist/template/pages/files/controller.ts

@@ -0,0 +1,47 @@
+import type { Note } from './state';
+import state from './state';
+
+const PICTURE = 'pictures/octocat.png';
+
+export default definePage({
+  initialState: state,
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  mutations: {
+    setDraft: (_state, event: DotEvent<{ value: string }>) => ({ draft: event.detail.value }),
+  },
+  actions: {
+    async refresh() {
+      const entries = await this.dash.file.list('', { recursive: true });
+      const notes: Note[] = [];
+      for (const entry of entries) {
+        if (entry.kind === 'file' && entry.path.startsWith('notes/')) {
+          notes.push({ path: entry.path, text: await this.dash.file.read(entry.path) });
+        }
+      }
+      const { used, quota } = await this.dash.file.usage();
+      const kept = await this.dash.file.stat(PICTURE);
+      this.setState({
+        notes,
+        usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
+        picture: kept ? (await this.dash.file.open(PICTURE)).url : '',
+      });
+    },
+    async save(state) {
+      await this.dash.file.write(`notes/${Date.now()}.txt`, state.draft);
+      this.setState({ draft: '' });
+      await this.actions.refresh();
+    },
+    async clearNotes() {
+      await this.dash.file.remove('notes', { recursive: true });
+      await this.actions.refresh();
+    },
+    async forgetPicture() {
+      await this.dash.file.remove(PICTURE);
+      await this.actions.refresh();
+    },
+  },
+});

package/dist/template/pages/files/state.ts

@@ -0,0 +1,11 @@
+export interface Note {
+  path: string;
+  text: string;
+}
+
+export default {
+  draft: '',
+  notes: [] as Note[],
+  usage: '',
+  picture: '',
+};

package/dist/template/pages/files/view.dml

@@ -0,0 +1,35 @@
+<View>
+  <Text variant="title">Files</Text>
+  <Text>A dot has a folder of its own that no other dot sees. What it keeps there lasts between runs.</Text>
+
+  <Text variant="caption" tone="muted">Notes, written as text files</Text>
+  <View variant="card" gap="small">
+    <Input label="Note" placeholder="Buy rice" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
+    <View direction="row" gap="small">
+      <Button onClick="save" disabled="{{ !draft }}">Save</Button>
+      <Button variant="secondary" onClick="clearNotes" disabled="{{ notes.length === 0 }}">Delete all</Button>
+    </View>
+    <For each="{{ notes }}" item="note" key="path">
+      <View gap="none">
+        <Text>{{ note.text }}</Text>
+        <Text variant="caption" tone="muted">{{ note.path }}</Text>
+      </View>
+    </For>
+    <If condition="{{ notes.length === 0 }}">
+      <Text variant="caption" tone="muted">No notes yet</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">A picture kept from the Network page</Text>
+  <View variant="card" gap="small">
+    <If condition="{{ picture }}">
+      <Image src="{{ picture }}" alt="Kept picture" width="64" height="64" />
+      <Button variant="secondary" onClick="forgetPicture">Forget it</Button>
+    </If>
+    <Else>
+      <Text variant="caption" tone="muted">None yet: download one on the Network page and tap Keep.</Text>
+    </Else>
+  </View>
+
+  <Text variant="caption" tone="muted">{{ usage }}</Text>
+</View>

package/dist/template/pages/forms/controller.ts

@@ -0,0 +1,44 @@
+import state from './state';
+
+type Typed = DotEvent<{ value: string }>;
+type Toggled = DotEvent<{ checked: boolean }>;
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    setAccount: (_state, event: Typed) => ({ account: event.detail.value }),
+    setName: (_state, event: Typed) => ({ name: event.detail.value }),
+    setEmail: (_state, event: Typed) => ({ email: event.detail.value }),
+    setPhone: (_state, event: Typed) => ({ phone: event.detail.value }),
+    setAmount: (_state, event: Typed) => ({ amount: event.detail.value }),
+    setNote: (_state, event: Typed) => ({ note: event.detail.value }),
+    setPlan: (_state, event: Typed) => ({ plan: event.detail.value }),
+    setReceipts: (_state, event: Toggled) => ({ receipts: event.detail.checked }),
+    setAgreed: (_state, event: Toggled) => ({ agreed: event.detail.checked }),
+  },
+  actions: {
+    async send(state) {
+      const errors = {
+        phone: state.phone.length < 8 ? 'Enter a phone number, such as 076 123456' : '',
+        amount: Number(state.amount) >= 1000 ? '' : 'Send at least Le 1,000',
+      };
+      this.setState({ errors, sent: '', failure: '' });
+      if (errors.phone || errors.amount) {
+        return;
+      }
+      this.setState({ sending: true });
+      try {
+        const { account, name, email, phone, amount, note, plan, receipts } = state;
+        await this.dash.network.http.request({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { account, name, email, phone, amount: Number(amount), note, plan, receipts },
+        });
+        this.setState({ sent: `Le ${amount} to ${phone}` });
+      } catch (error) {
+        this.setState({ failure: (error as Error).message });
+      }
+      this.setState({ sending: false });
+    },
+  },
+});

package/dist/template/pages/forms/state.ts

@@ -0,0 +1,15 @@
+export default {
+  account: '',
+  name: '',
+  email: '',
+  phone: '',
+  amount: '',
+  note: '',
+  plan: 'monthly',
+  receipts: true,
+  agreed: false,
+  errors: { phone: '', amount: '' },
+  sending: false,
+  sent: '',
+  failure: '',
+};

package/dist/template/pages/forms/view.dml

@@ -0,0 +1,39 @@
+<View>
+  <Text variant="title">Forms</Text>
+  <Text>Each change reaches the controller, which keeps the value in state and checks it when the form is sent.</Text>
+
+  <View variant="card">
+    <Select label="Pay from" placeholder="Choose an account" value="{{ account }}" onChange="setAccount">
+      <Option value="savings" label="Savings · Le 1,250,000" />
+      <Option value="wallet" label="Mobile wallet · Le 84,500" />
+      <Option value="card" label="Debit card · Le 310,000" />
+    </Select>
+    <Input label="Name" placeholder="Ada Lovelace" value="{{ name }}" maxLength="40" onChange="setName" />
+    <Input label="Email" type="email" placeholder="ada@example.com" hint="For the receipt" value="{{ email }}" onChange="setEmail" />
+    <Input label="Phone" type="phone" placeholder="076 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
+    <Input label="Amount" type="number" prefix="Le" placeholder="0" value="{{ amount }}" error="{{ errors.amount }}" onChange="setAmount" />
+    <TextArea label="Note" placeholder="What it's for" rows="3" maxLength="140" hint="{{ note.length }} of 140" value="{{ note }}" onChange="setNote" />
+  </View>
+
+  <View variant="card">
+    <RadioGroup label="How often" value="{{ plan }}" onChange="setPlan">
+      <Radio value="once" label="Just once" />
+      <Radio value="monthly" label="Every month" />
+      <Radio value="yearly" label="Every year" />
+    </RadioGroup>
+    <Divider />
+    <Switch label="Send me receipts" checked="{{ receipts }}" onChange="setReceipts" />
+    <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
+  </View>
+
+  <If condition="{{ sent }}">
+    <Notice tone="success" title="Sent">{{ sent }}</Notice>
+  </If>
+  <If condition="{{ failure }}">
+    <Notice tone="danger" title="Not sent">{{ failure }}</Notice>
+  </If>
+
+  <Footer>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Send</Button>
+  </Footer>
+</View>

package/dist/template/pages/images/controller.ts

@@ -0,0 +1,15 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    grow: (state) => ({ size: Math.min(state.size + 16, 128) }),
+    shrink: (state) => ({ size: Math.max(state.size - 16, 16) }),
+    logoLoaded: (_state, event: DotEvent<{ width: number; height: number }>) => ({
+      loaded: `${event.detail.width} × ${event.detail.height}`,
+    }),
+    missingFailed: (_state, event: DotEvent<{ message: string }>) => ({
+      failure: event.detail.message,
+    }),
+  },
+});

package/dist/template/pages/images/state.ts

@@ -0,0 +1,7 @@
+export default {
+  size: 64,
+  loaded: '',
+  // Built at run time, so the build doesn't check that the file exists.
+  missing: 'statics/missing.png',
+  failure: '',
+};

package/dist/template/pages/images/view.dml

@@ -0,0 +1,38 @@
+<View>
+  <Text variant="title">Images</Text>
+  <Text>Pictures in the dot's statics/ folder ship with it. The build checks each one.</Text>
+
+  <View variant="card" direction="row" align="end" gap="large">
+    <Image src="statics/logo.png" alt="Small logo" width="24" height="24" />
+    <Image src="statics/logo.png" alt="Medium logo" width="48" height="48" />
+    <Image src="statics/logo.png" alt="Large logo" width="96" height="96" />
+  </View>
+
+  <Text variant="caption" tone="muted">Shapes, and how a picture fills its box</Text>
+  <View variant="card" direction="row" align="center" gap="large">
+    <Image src="statics/logo.png" alt="Rounded" width="56" height="56" />
+    <Image src="statics/logo.png" alt="Square" width="56" height="56" shape="square" />
+    <Image src="statics/logo.png" alt="Circle" width="56" height="56" shape="circle" />
+    <Image src="statics/logo.png" alt="Contained" width="96" height="56" fit="contain" />
+  </View>
+
+  <Text variant="caption" tone="muted">Sizes can come from state</Text>
+  <View variant="card" gap="small">
+    <Image src="statics/logo.png" alt="Logo" width="{{ size }}" height="{{ size }}" onLoad="logoLoaded" />
+    <Text>{{ size }} × {{ size }} on screen, {{ loaded }} in the file</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="shrink" disabled="{{ size <= 16 }}">Smaller</Button>
+      <Button variant="secondary" onClick="grow" disabled="{{ size >= 128 }}">Bigger</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">An image that fails says why</Text>
+  <View variant="card">
+    <If condition="{{ failure }}">
+      <Text>{{ failure }}</Text>
+    </If>
+    <Else>
+      <Image src="{{ missing }}" alt="" width="48" height="48" onError="missingFailed" />
+    </Else>
+  </View>
+</View>

package/dist/template/pages/index/controller.ts

@@ -2,66 +2,9 @@ import state from './state';
 
 export default definePage({
   initialState: state,
-  hooks: {
-    onShow() {
-      this.setState((current) => ({ visits: current.visits + 1 }));
-    },
-  },
-  mutations: {
-    increment: (state) => {
-      const count = state.count + 1;
-      return { count, taps: [{ id: count }, ...state.taps] };
-    },
-    reset: () => ({ count: 0, taps: [] }),
-    rename: (_state, event: DotEvent<{ value: string }>) => ({ title: event.detail.value }),
-    logoLoaded: (_state, event: DotEvent<{ width: number; height: number }>) => ({
-      logoStatus: 'loaded' as const,
-      logoSize: `${event.detail.width}x${event.detail.height}`,
-    }),
-    logoFailed: () => ({ logoStatus: 'failed' as const }),
-  },
   actions: {
-    fillUp() {
-      while (this.state.count < this.state.limit) {
-        this.mutations.increment();
-      }
-    },
-    async sayHello(state) {
-      try {
-        const { action } = await dash.ui.alert(
-          {
-            title: `Hello from ${state.title}`,
-            message: env.DOT_PUBLIC_GREETING,
-            actions: [
-              { id: 'nice', label: 'Nice' },
-              { id: 'close', label: 'Close', role: 'cancel' },
-            ],
-          },
-          { timeout: 30_000 },
-        );
-        this.setState({ dashNote: `You chose "${action}"` });
-      } catch (error) {
-        this.setState({ dashNote: errorMessage(error) });
-      }
-    },
-    async vibrate() {
-      await dash.system.vibrate({ style: 'success' });
-    },
-    async toggleTorch(state) {
-      const next = state.torch === 'on' ? 'off' : 'on';
-      try {
-        await dash.system.torch(next);
-        this.setState({ torch: next, dashNote: `Torch ${next}` });
-      } catch (error) {
-        this.setState({ dashNote: errorMessage(error) });
-      }
-    },
-    openTips(state) {
-      this.navigation.push('help/tips', { count: String(state.count), trail: 'Home', depth: '1' });
+    open(_state, event: DotEvent<unknown, { page: PageId }>) {
+      this.navigation.push(event.data.page);
     },
   },
 });
-
-function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}