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

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

@@ -1,17 +1,98 @@
-export interface Tap {
-  id: number;
+export interface Feature {
+  page: PageId;
+  title: string;
+  summary: string;
+  icon: string;
 }
 
-export type LogoStatus = 'loading' | 'loaded' | 'failed';
+export interface Section {
+  title: string;
+  features: Feature[];
+}
 
 export default {
-  title: 'Dot Counter',
-  logoStatus: 'loading' as LogoStatus,
-  logoSize: '',
-  count: 0,
-  limit: 5,
-  taps: [] as Tap[],
-  visits: 0,
-  torch: 'off' as 'on' | 'off',
-  dashNote: '',
+  title: 'Showcase',
+  sections: [
+    {
+      title: 'Views',
+      features: [
+        {
+          page: 'layout',
+          title: 'Layout',
+          summary: 'Rows, columns, gaps, alignment and cards',
+          icon: 'grid',
+        },
+        {
+          page: 'text',
+          title: 'Text and bindings',
+          summary: 'Text styles and tones, and values from state',
+          icon: 'edit',
+        },
+        {
+          page: 'images',
+          title: 'Images',
+          summary: 'Pictures from statics/, their shapes and events',
+          icon: 'image',
+        },
+        {
+          page: 'lists',
+          title: 'Lists and icons',
+          summary: 'Rows to tap, sheets of actions, badges and icons',
+          icon: 'list',
+        },
+        {
+          page: 'forms',
+          title: 'Forms',
+          summary: 'Fields, choices, switches, and a footer to send them',
+          icon: 'check',
+        },
+        {
+          page: 'feedback',
+          title: 'Feedback',
+          summary: 'Skeletons, toasts, spinners, progress and notices',
+          icon: 'bell',
+        },
+      ],
+    },
+    {
+      title: 'Logic',
+      features: [
+        {
+          page: 'state',
+          title: 'State, mutations and actions',
+          summary: 'A counter, conditions and lists',
+          icon: 'refresh',
+        },
+        {
+          page: 'navigation',
+          title: 'Navigation and hooks',
+          summary: 'The page stack, and when each hook runs',
+          icon: 'arrow-right',
+        },
+      ],
+    },
+    {
+      title: 'Dash',
+      features: [
+        {
+          page: 'device',
+          title: 'Alerts and device',
+          summary: 'Native alerts, the clipboard, sharing, delays and the torch',
+          icon: 'mobile',
+        },
+        {
+          page: 'network',
+          title: 'Network',
+          summary: 'Requests, JSON, downloads and uploads',
+          icon: 'wifi',
+        },
+        {
+          page: 'files',
+          title: 'Files',
+          summary: "The dot's own files, kept between runs",
+          icon: 'file',
+        },
+      ],
+    },
+  ] as Section[],
 };

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

@@ -1,66 +1,20 @@
-<Text variant="caption">Home</Text>
-
-<View direction="row" align="center" gap="large">
-  <Image src="statics/logo.png" alt="Dot logo" width="48" height="48" onLoad="logoLoaded" onError="logoFailed" />
-  <View gap="none">
-    <Text variant="title">{{ title }}</Text>
-    <If condition="{{ logoStatus === 'loaded' }}">
-      <Text variant="caption">Logo loaded at {{ logoSize }}</Text>
-    </If>
-    <ElseIf condition="{{ logoStatus === 'failed' }}">
-      <Text variant="caption">Logo failed to load</Text>
-    </ElseIf>
-    <Else>
-      <Text variant="caption">Loading logo…</Text>
-    </Else>
-  </View>
-</View>
-
-<View variant="card">
-  <Text variant="title">{{ count }} / {{ limit }}</Text>
-  <If condition="{{ count >= limit }}">
-    <Text>Limit reached</Text>
-  </If>
-  <ElseIf condition="{{ count > 0 }}">
-    <Text>Keep tapping</Text>
-  </ElseIf>
-  <Else>
-    <Text>Tap to start 🚀</Text>
-  </Else>
-  <View direction="row">
-    <Button onClick="increment" disabled="{{ count >= limit }}">Add one</Button>
-    <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
-    <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Fill up</Button>
-  </View>
-</View>
-
-<View variant="card" gap="small">
-  <Text variant="caption">Name your counter</Text>
-  <Input label="Counter name" placeholder="Dot Counter" value="{{ title }}" maxLength="24" onChange="rename" />
-</View>
-
-<View variant="card" gap="small">
-  <Text variant="caption">Dash</Text>
-  <View direction="row">
-    <Button variant="secondary" onClick="sayHello">Say hello</Button>
-    <Button variant="secondary" onClick="vibrate">Vibrate</Button>
-    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Torch off' : 'Torch on' }}</Button>
+<View>
+  <View direction="row" align="center" gap="large">
+    <Image src="statics/logo.png" alt="Dot logo" width="48" height="48" />
+    <View gap="none">
+      <Text variant="title">{{ title }}</Text>
+      <Text variant="caption" tone="muted">What a dot can do, one page each</Text>
+    </View>
   </View>
-  <If condition="{{ dashNote }}">
-    <Text variant="caption">{{ dashNote }}</Text>
-  </If>
-</View>
 
-<View variant="card" onTap="openTips">
-  <Text>Tips -> </Text>
-  <Text variant="caption">Shown {{ visits }} {{ visits === 1 ? 'time' : 'times' }}</Text>
+  <For each="{{ sections }}" item="section" key="title">
+    <View gap="small">
+      <Text variant="caption" tone="muted">{{ section.title }}</Text>
+      <List>
+        <For each="{{ section.features }}" item="feature" key="page">
+          <ListItem icon="{{ feature.icon }}" title="{{ feature.title }}" subtitle="{{ feature.summary }}" data-page="{{ feature.page }}" onTap="open" />
+        </For>
+      </List>
+    </View>
+  </For>
 </View>
-
-<If condition="{{ taps.length > 0 }}">
-  <View variant="card" gap="small">
-    <Text variant="caption">History</Text>
-    <For each="{{ taps }}" index="i" item="tap" key="id">
-      <Text>{{ i + 1 }}. Tap #{{ tap.id }}</Text>
-    </For>
-  </View>
-</If>

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

@@ -0,0 +1,23 @@
+import type { Align, Direction, Justify, Space } from './state';
+import state from './state';
+
+const DIRECTIONS: Direction[] = ['row', 'column'];
+const JUSTIFIES: Justify[] = ['start', 'center', 'end', 'between'];
+const ALIGNS: Align[] = ['stretch', 'start', 'center', 'end'];
+const SPACES: Space[] = ['none', 'small', 'medium', 'large'];
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    nextDirection: (state) => ({ direction: after(DIRECTIONS, state.direction) }),
+    nextJustify: (state) => ({ justify: after(JUSTIFIES, state.justify) }),
+    nextAlign: (state) => ({ align: after(ALIGNS, state.align) }),
+    nextGap: (state) => ({ gap: after(SPACES, state.gap) }),
+    toggleWrap: (state) => ({ wrap: !state.wrap }),
+  },
+});
+
+function after<Value>(values: Value[], current: Value): Value {
+  const next = (values.indexOf(current) + 1) % values.length;
+  return values[next]!;
+}

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

@@ -0,0 +1,12 @@
+export type Direction = 'row' | 'column';
+export type Justify = 'start' | 'center' | 'end' | 'between';
+export type Align = 'stretch' | 'start' | 'center' | 'end';
+export type Space = 'none' | 'small' | 'medium' | 'large';
+
+export default {
+  direction: 'row' as Direction,
+  justify: 'start' as Justify,
+  align: 'center' as Align,
+  gap: 'small' as Space,
+  wrap: true,
+};

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

@@ -0,0 +1,63 @@
+<View>
+  <Text variant="title">Layout</Text>
+  <Text>A View lays out what it holds in a column, or in a row. Change the one below.</Text>
+
+  <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
+    <Button variant="secondary">One</Button>
+    <Button variant="secondary">Two</Button>
+    <Text variant="title">Three</Text>
+    <Button variant="secondary">Four</Button>
+    <Text variant="caption" tone="muted">Five</Text>
+  </View>
+
+  <View gap="small">
+    <View direction="row" align="center">
+      <Text>direction="{{ direction }}"</Text>
+      <View grow />
+      <Button variant="secondary" onClick="nextDirection">Change</Button>
+    </View>
+    <View direction="row" align="center">
+      <Text>justify="{{ justify }}"</Text>
+      <View grow />
+      <Button variant="secondary" onClick="nextJustify">Change</Button>
+    </View>
+    <View direction="row" align="center">
+      <Text>align="{{ align }}"</Text>
+      <View grow />
+      <Button variant="secondary" onClick="nextAlign">Change</Button>
+    </View>
+    <View direction="row" align="center">
+      <Text>gap="{{ gap }}"</Text>
+      <View grow />
+      <Button variant="secondary" onClick="nextGap">Change</Button>
+    </View>
+    <View direction="row" align="center">
+      <Text>wrap="{{ wrap }}"</Text>
+      <View grow />
+      <Button variant="secondary" onClick="toggleWrap">Change</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">grow takes the space that's left</Text>
+  <View direction="row" gap="small">
+    <View variant="card" grow>
+      <Text>grow</Text>
+    </View>
+    <View variant="card">
+      <Text>fixed</Text>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">padding, on every side or just one</Text>
+  <View direction="row" gap="small">
+    <View variant="card" padding="small">
+      <Text>small</Text>
+    </View>
+    <View variant="card" padding="large">
+      <Text>large</Text>
+    </View>
+    <View variant="card" padding="small" paddingStart="large">
+      <Text>start</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,36 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    choose: (state, event: DotEvent<unknown, { id: string }>) => {
+      const account = state.accounts.find((candidate) => candidate.id === event.data.id);
+      return { chosen: account?.name ?? '' };
+    },
+    openPayment: (state, event: DotEvent<unknown, { id: string }>) => ({
+      selected: state.payments.find((payment) => payment.id === event.data.id) ?? null,
+    }),
+    closeSheet: () => ({ selected: null }),
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyReference(state) {
+      if (!state.selected) {
+        return;
+      }
+      await this.dash.system.copyText(state.selected.reference);
+      this.setState({ selected: null, toast: 'Reference copied' });
+    },
+    async shareReceipt(state) {
+      if (!state.selected) {
+        return;
+      }
+      const { title, amount, status, reference } = state.selected;
+      this.setState({ selected: null });
+      await this.dash.system.share({
+        title: `${title} receipt`,
+        text: `${title}: ${amount}, ${status}. Reference ${reference}.`,
+      });
+    },
+  },
+});

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

@@ -0,0 +1,96 @@
+export interface Account {
+  id: string;
+  name: string;
+  number: string;
+  balance: string;
+  icon: string;
+}
+
+export interface Payment {
+  id: string;
+  title: string;
+  date: string;
+  amount: string;
+  status: string;
+  tone: string;
+  reference: string;
+}
+
+export default {
+  accounts: [
+    {
+      id: 'savings',
+      name: 'Savings',
+      number: '•••• 2041',
+      balance: 'Le 1,250,000',
+      icon: 'bank',
+    },
+    {
+      id: 'wallet',
+      name: 'Mobile wallet',
+      number: '076 •••• 21',
+      balance: 'Le 84,500',
+      icon: 'mobile',
+    },
+    { id: 'card', name: 'Debit card', number: '•••• 7730', balance: 'Le 310,000', icon: 'card' },
+  ] as Account[],
+  payments: [
+    {
+      id: 'p1',
+      title: 'Electricity',
+      date: 'Today',
+      amount: 'Le 50,000',
+      status: 'Paid',
+      tone: 'success',
+      reference: 'EDSA-58213',
+    },
+    {
+      id: 'p2',
+      title: 'Airtime',
+      date: 'Yesterday',
+      amount: 'Le 10,000',
+      status: 'Pending',
+      tone: 'warning',
+      reference: 'AIR-11907',
+    },
+    {
+      id: 'p3',
+      title: 'Water',
+      date: '12 September',
+      amount: 'Le 35,000',
+      status: 'Failed',
+      tone: 'danger',
+      reference: 'GVWC-40022',
+    },
+  ] as Payment[],
+  chosen: '',
+  // The payment whose actions the sheet shows.
+  selected: null as Payment | null,
+  toast: '',
+  icons: [
+    'home',
+    'search',
+    'bell',
+    'user',
+    'settings',
+    'wallet',
+    'bank',
+    'card',
+    'cash',
+    'send',
+    'receipt',
+    'qr-code',
+    'bolt',
+    'water',
+    'phone',
+    'mail',
+    'calendar',
+    'clock',
+    'location',
+    'lock',
+    'share',
+    'copy',
+    'download',
+    'star',
+  ],
+};

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

@@ -0,0 +1,59 @@
+<View>
+  <Text variant="title">Lists and icons</Text>
+  <Text>A List draws rows in a card. A row shows an icon or a picture, a value or anything at its end, and a chevron when it can be tapped.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Rows know which one was tapped from their data- attributes</Text>
+    <List>
+      <For each="{{ accounts }}" item="account" key="id">
+        <ListItem icon="{{ account.icon }}" title="{{ account.name }}" subtitle="{{ account.number }}" value="{{ account.balance }}" data-id="{{ account.id }}" onTap="choose" />
+      </For>
+    </List>
+    <If condition="{{ chosen }}">
+      <Text>You chose {{ chosen }}</Text>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A badge at the end of each row; tap one for its actions</Text>
+    <List>
+      <For each="{{ payments }}" item="payment" key="id">
+        <ListItem title="{{ payment.title }}" subtitle="{{ payment.date }} · {{ payment.amount }}" data-id="{{ payment.id }}" onTap="openPayment">
+          <Badge tone="{{ payment.tone }}">{{ payment.status }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Icons, by name, in any tone</Text>
+    <View variant="card" direction="row" wrap gap="large">
+      <For each="{{ icons }}" item="icon" key="*this">
+        <Icon name="{{ icon }}" />
+      </For>
+    </View>
+    <View variant="card" direction="row" wrap gap="large" align="center">
+      <Icon name="info" tone="info" size="small" />
+      <Icon name="success" tone="success" />
+      <Icon name="warning" tone="warning" size="large" />
+      <Icon name="error" tone="danger" size="large" />
+      <Icon name="star" tone="muted" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A divider between things</Text>
+    <View variant="card">
+      <Text>Above the line</Text>
+      <Divider />
+      <Text>Below the line</Text>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.amount }}" onClose="closeSheet">
+    <Button variant="secondary" onClick="copyReference">Copy reference {{ selected.reference }}</Button>
+    <Button variant="secondary" onClick="shareReceipt">Share receipt</Button>
+    <Button onClick="closeSheet">Cancel</Button>
+  </Sheet>
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

@@ -0,0 +1,42 @@
+import type { HookRun } from './state';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  hooks: {
+    // Options come from the page that opened this one, as strings.
+    onLoad(options) {
+      const depth = Number(options.depth ?? '1') + 1;
+      const from = options.trail ?? 'Home';
+      this.setState({ depth, from, trail: `${from} › ${depth}` });
+      this.setState((current) => ({ hooks: ran(current.hooks, 'onLoad') }));
+    },
+    onShow() {
+      this.setState((current) => ({ hooks: ran(current.hooks, 'onShow') }));
+    },
+    onHide() {
+      this.setState((current) => ({ hooks: ran(current.hooks, 'onHide') }));
+    },
+  },
+  actions: {
+    openAnother(state) {
+      this.navigation.push('navigation', { depth: String(state.depth), trail: state.trail });
+    },
+    replaceThis(state) {
+      this.navigation.replace('navigation', { depth: String(state.depth - 1), trail: state.from });
+    },
+    back() {
+      this.navigation.back();
+    },
+    backTwo() {
+      this.navigation.back(2);
+    },
+    home() {
+      this.navigation.reset('index');
+    },
+  },
+});
+
+function ran(hooks: readonly HookRun[], hook: string): HookRun[] {
+  return [...hooks, { id: hooks.length + 1, hook }];
+}

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

@@ -0,0 +1,13 @@
+export interface HookRun {
+  id: number;
+  hook: string;
+}
+
+export default {
+  depth: 1,
+  maxDepth: 8,
+  // The trail of the page that opened this one.
+  from: '',
+  trail: '',
+  hooks: [] as HookRun[],
+};

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

@@ -0,0 +1,24 @@
+<View>
+  <Text variant="caption" tone="muted">{{ trail }}</Text>
+  <Text variant="title">Navigation and hooks</Text>
+  <Text>Each page opens on top of the one before it; back returns to the one below. A dot has room for {{ maxDepth }} pages at once.</Text>
+
+  <View variant="card" gap="small">
+    <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
+    <View direction="row" wrap gap="small">
+      <Button onClick="openAnother" disabled="{{ depth >= maxDepth }}">Open another</Button>
+      <Button variant="secondary" onClick="replaceThis">Replace this one</Button>
+      <Button variant="secondary" onClick="back">Back</Button>
+      <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>
+      <Button variant="secondary" onClick="home">Start over</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">The hooks this page ran, in order</Text>
+  <View variant="card" gap="small">
+    <For each="{{ hooks }}" item="run" key="id">
+      <Text>{{ run.id }}. {{ run.hook }}</Text>
+    </For>
+    <Text variant="caption" tone="muted">Open another page and come back: this one runs onHide, then onShow.</Text>
+  </View>
+</View>

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

@@ -0,0 +1,107 @@
+import state from './state';
+
+const PICTURE = 'pictures/octocat.png';
+
+interface GitHubUser {
+  login: string;
+  name: string | null;
+  followers: number;
+}
+
+interface Echo {
+  json: unknown;
+  files: Record<string, string>;
+}
+
+export default definePage({
+  initialState: state,
+  actions: {
+    async fetchZen() {
+      try {
+        const response = await this.dash.network.http.request({
+          url: 'https://api.github.com/zen',
+        });
+        this.setState({ zen: response.ok ? response.body : `GitHub answered ${response.status}` });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async fetchProfile() {
+      try {
+        const { body } = await this.dash.network.http.request<GitHubUser>(
+          { url: 'https://api.github.com/users/octocat', as: 'json' },
+          { timeout: 10_000 },
+        );
+        this.setState({
+          profile: { login: body.login, name: body.name ?? body.login, followers: body.followers },
+        });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sendJson() {
+      try {
+        const { body } = await this.dash.network.http.request<Echo>({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { item: 'rice', count: 2 },
+          as: 'json',
+        });
+        this.setState({ echo: JSON.stringify(body.json) });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async download() {
+      try {
+        const response = await this.dash.network.http.download({
+          url: 'https://avatars.githubusercontent.com/u/583231?s=128',
+          name: 'octocat.png',
+        });
+        if (response.ok) {
+          const { id, url, size } = response.file;
+          this.setState({ picture: { id, url, size }, kept: false });
+        } else {
+          this.setState({ note: `GitHub answered ${response.status}` });
+        }
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async upload(state) {
+      try {
+        const { body } = await this.dash.network.http.upload<Echo>({
+          url: 'https://httpbin.org/post',
+          fields: { title: 'Octocat' },
+          files: [{ field: 'picture', file: state.picture.id }],
+          as: 'json',
+        });
+        this.setState({ uploaded: Object.keys(body.files).join(', ') });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sharePicture(state) {
+      try {
+        await this.dash.system.share({ file: state.picture.id });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async keep(state) {
+      try {
+        await this.dash.file.save(state.picture.id, PICTURE, { overwrite: true });
+        this.setState({ kept: true });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async tryUnlistedHost() {
+      try {
+        await this.dash.network.http.request({ url: 'https://example.com' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+  },
+});