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

package/dist/templates/showcase/.env

@@ -0,0 +1,3 @@
+# 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/templates/showcase/dot.ts

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

package/dist/templates/showcase/pages/carousel/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    showTip: (_state, event: DotEvent<{ index: number }>) => ({ tip: event.detail.index }),
+    back: (state) => ({ tip: Math.max(state.tip - 1, 0) }),
+    next: (state) => ({ tip: Math.min(state.tip + 1, state.tips.length - 1) }),
+  },
+});

package/dist/templates/showcase/pages/carousel/state.ts

@@ -0,0 +1,40 @@
+export interface Promo {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+}
+
+export interface Tip {
+  title: string;
+  text: string;
+}
+
+export default {
+  promos: [
+    {
+      id: 'send',
+      title: 'Send money home',
+      text: 'Free transfers to any mobile wallet this week',
+      icon: 'send',
+    },
+    {
+      id: 'bills',
+      title: 'Pay bills in seconds',
+      text: 'Electricity, water and airtime in one place',
+      icon: 'bolt',
+    },
+    {
+      id: 'save',
+      title: 'Save a little each day',
+      text: 'Set a goal and watch it grow',
+      icon: 'wallet',
+    },
+  ] as Promo[],
+  tips: [
+    { title: 'Welcome', text: 'Swipe, tap a dot, or use the buttons below.' },
+    { title: 'The page decides', text: "The carousel's index comes from state." },
+    { title: 'And hears back', text: 'A swipe raises change, which sets the index again.' },
+  ] as Tip[],
+  tip: 0,
+};

package/dist/templates/showcase/pages/carousel/view.dml

@@ -0,0 +1,37 @@
+<View>
+  <Text variant="title">Carousel</Text>
+  <Text>A Carousel shows its children one at a time. Swipe between them, or tap a dot.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Plays by itself and loops, pausing while touched, with a gap between slides that scale in as they come</Text>
+    <Carousel autoplay loop interval="3000" gap="medium" effect="scale">
+      <For each="{{ promos }}" item="promo" key="id">
+        <View variant="card" direction="row" align="center" gap="large">
+          <Icon name="{{ promo.icon }}" size="large" tone="info" />
+          <View gap="small" grow>
+            <Text weight="bold">{{ promo.title }}</Text>
+            <Text tone="muted">{{ promo.text }}</Text>
+          </View>
+        </View>
+      </For>
+    </Carousel>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">The page chooses the slide, and hears when a swipe changes it</Text>
+    <Carousel index="{{ tip }}" onChange="showTip">
+      <For each="{{ tips }}" item="card" key="title">
+        <View variant="card" align="center" gap="medium">
+          <Image src="statics/logo.png" alt="" width="48" height="48" />
+          <Text weight="bold">{{ card.title }}</Text>
+          <Text tone="muted" align="center">{{ card.text }}</Text>
+        </View>
+      </For>
+    </Carousel>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="back" disabled="{{ tip === 0 }}">Back</Button>
+      <Button onClick="next" disabled="{{ tip === tips.length - 1 }}">Next</Button>
+    </View>
+    <Text>Tip {{ tip + 1 }} of {{ tips.length }}</Text>
+  </View>
+</View>

package/dist/templates/showcase/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/templates/showcase/pages/device/state.ts

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

package/dist/templates/showcase/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/templates/showcase/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/templates/showcase/pages/feedback/state.ts

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

package/dist/templates/showcase/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/templates/showcase/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/templates/showcase/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/templates/showcase/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/templates/showcase/pages/filters/controller.ts

@@ -0,0 +1,28 @@
+import type { Payment } from './state';
+import state from './state';
+
+type Chosen = DotEvent<{ value: string }>;
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    chooseTab: (state, event: Chosen) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.payments, tab, state.status) };
+    },
+    chooseStatus: (state, event: DotEvent<unknown, { status: string }>) => {
+      const { status } = event.data;
+      return { status, shown: filter(state.payments, state.tab, status) };
+    },
+    clearFilters: (state) => ({ tab: 'all', status: 'All', shown: state.payments }),
+    choosePeriod: (_state, event: Chosen) => ({ period: event.detail.value }),
+  },
+});
+
+function filter(payments: readonly Payment[], tab: string, status: string): Payment[] {
+  return payments.filter(
+    (payment) =>
+      (tab === 'all' || payment.direction === tab) &&
+      (status === 'All' || payment.status === status),
+  );
+}

package/dist/templates/showcase/pages/filters/state.ts

@@ -0,0 +1,72 @@
+export type Direction = 'in' | 'out';
+export type Status = 'Paid' | 'Pending' | 'Failed';
+
+export interface Payment {
+  id: string;
+  title: string;
+  date: string;
+  amount: string;
+  direction: Direction;
+  status: Status;
+  tone: string;
+}
+
+const payments: Payment[] = [
+  {
+    id: 'p1',
+    title: 'Salary',
+    date: 'Today',
+    amount: 'Le 2,400,000',
+    direction: 'in',
+    status: 'Paid',
+    tone: 'success',
+  },
+  {
+    id: 'p2',
+    title: 'Electricity',
+    date: 'Today',
+    amount: 'Le 50,000',
+    direction: 'out',
+    status: 'Paid',
+    tone: 'success',
+  },
+  {
+    id: 'p3',
+    title: 'From Aminata',
+    date: 'Yesterday',
+    amount: 'Le 75,000',
+    direction: 'in',
+    status: 'Pending',
+    tone: 'warning',
+  },
+  {
+    id: 'p4',
+    title: 'Airtime',
+    date: 'Yesterday',
+    amount: 'Le 10,000',
+    direction: 'out',
+    status: 'Pending',
+    tone: 'warning',
+  },
+  {
+    id: 'p5',
+    title: 'Water',
+    date: '12 September',
+    amount: 'Le 35,000',
+    direction: 'out',
+    status: 'Failed',
+    tone: 'danger',
+  },
+];
+
+export default {
+  payments,
+  // The payments the tab and the chosen status leave.
+  shown: payments,
+  tab: 'all',
+  incoming: payments.filter((payment) => payment.direction === 'in').length,
+  outgoing: payments.filter((payment) => payment.direction === 'out').length,
+  statuses: ['All', 'Paid', 'Pending', 'Failed'],
+  status: 'All',
+  period: 'week',
+};

package/dist/templates/showcase/pages/filters/view.dml

@@ -0,0 +1,43 @@
+<View>
+  <Text variant="title">Tabs and filters</Text>
+  <Text>Tabs switch what a page shows, chips narrow it down, and an empty state says when nothing is left.</Text>
+
+  <Tabs value="{{ tab }}" onChange="chooseTab">
+    <Tab value="all" label="All" />
+    <Tab value="in" label="Incoming" badge="{{ incoming }}" />
+    <Tab value="out" label="Outgoing" badge="{{ outgoing }}" />
+  </Tabs>
+
+  <View direction="row" gap="small" wrap>
+    <For each="{{ statuses }}" item="option" key="*this">
+      <Chip label="{{ option }}" selected="{{ option === status }}" data-status="{{ option }}" onTap="chooseStatus" />
+    </For>
+  </View>
+
+  <If condition="{{ shown.length > 0 }}">
+    <List>
+      <For each="{{ shown }}" item="payment" key="id">
+        <ListItem icon="{{ payment.direction === 'in' ? 'arrow-down' : 'arrow-up' }}" title="{{ payment.title }}" subtitle="{{ payment.date }} · {{ payment.amount }}">
+          <Badge tone="{{ payment.tone }}">{{ payment.status }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <Else>
+    <EmptyState icon="search" title="No payments here" text="Nothing matches this tab and status.">
+      <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+    </EmptyState>
+  </Else>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices</Text>
+    <Tabs variant="segmented" value="{{ period }}" onChange="choosePeriod">
+      <Tab value="week" label="Week" />
+      <Tab value="month" label="Month" />
+      <Tab value="year" label="Year" />
+    </Tabs>
+    <View variant="card">
+      <Text>Spent this {{ period }}: {{ period === 'week' ? 'Le 95,000' : period === 'month' ? 'Le 410,000' : 'Le 4,870,000' }}</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/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/templates/showcase/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: '',
+};