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

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  actions: {
+    open(_state, event: DotEvent<unknown, { page: PageId }>) {
+      this.navigation.push(event.data.page);
+    },
+  },
+});

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

@@ -0,0 +1,116 @@
+export interface Feature {
+  page: PageId;
+  title: string;
+  summary: string;
+  icon: string;
+}
+
+export interface Section {
+  title: string;
+  features: Feature[];
+}
+
+export default {
+  title: 'Showcase',
+  sections: [
+    {
+      title: 'Views',
+      features: [
+        {
+          page: 'layout',
+          title: 'Layout',
+          summary: 'Rows, columns, grids, 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: 'carousel',
+          title: 'Carousel',
+          summary: 'Slides to swipe, played by themselves, with dots',
+          icon: 'image',
+        },
+        {
+          page: 'lists',
+          title: 'Lists and icons',
+          summary: 'Rows to tap, sheets of actions, badges and icons',
+          icon: 'list',
+        },
+        {
+          page: 'filters',
+          title: 'Tabs and filters',
+          summary: 'Tabs, chips to narrow a list, and an empty state',
+          icon: 'search',
+        },
+        {
+          page: 'forms',
+          title: 'Forms',
+          summary: 'Fields, choices, switches, and a footer to send them',
+          icon: 'check',
+        },
+        {
+          page: 'payments',
+          title: 'Payments',
+          summary: 'Amounts, one-time codes, PINs and QR codes',
+          icon: 'cash',
+        },
+        {
+          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/templates/showcase/pages/index/view.dml

@@ -0,0 +1,20 @@
+<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>
+
+  <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>

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

@@ -0,0 +1,26 @@
+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 }),
+    openService: (_state, event: DotEvent<unknown, { name: string }>) => ({
+      service: event.data.name,
+    }),
+  },
+});
+
+function after<Value>(values: Value[], current: Value): Value {
+  const next = (values.indexOf(current) + 1) % values.length;
+  return values[next]!;
+}

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

@@ -0,0 +1,14 @@
+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,
+  // The service tapped in the grid.
+  service: '',
+};

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

@@ -0,0 +1,80 @@
+<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>
+
+  <Text variant="caption" tone="muted">A Grid keeps equal columns, here of services to tap</Text>
+  <View variant="card" gap="medium">
+    <Grid columns="4">
+      <GridItem icon="send" label="Send" data-name="Send" onTap="openService" />
+      <GridItem icon="phone" label="Airtime" data-name="Airtime" onTap="openService" />
+      <GridItem icon="bolt" label="Electricity" badge="New" data-name="Electricity" onTap="openService" />
+      <GridItem icon="water" label="Water" data-name="Water" onTap="openService" />
+      <GridItem icon="qr-code" label="Scan to pay" data-name="Scan to pay" onTap="openService" />
+      <GridItem icon="wallet" label="Save" data-name="Save" onTap="openService" />
+      <GridItem icon="receipt" label="Receipts" data-name="Receipts" onTap="openService" />
+      <GridItem icon="more" label="More" data-name="More" onTap="openService" />
+    </Grid>
+    <If condition="{{ service }}">
+      <Text tone="muted">You tapped {{ service }}</Text>
+    </If>
+  </View>
+</View>

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

@@ -0,0 +1,64 @@
+import type { HookRun } from './state';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  // What Dash's navigation bar shows until the page changes it.
+  configs: { navigationBar: { title: 'Navigation' } },
+  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.setNavigationBar({ title: `Page ${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');
+    },
+    toggleColors(state) {
+      const colored = !state.colored;
+      // Undefined puts Dash's own colors back.
+      this.setNavigationBar({
+        backgroundColor: colored ? '#1A73E8' : undefined,
+        textColor: colored ? '#FFFFFF' : undefined,
+      });
+      this.setState({ colored });
+    },
+    toggleNavigationBar(state) {
+      const navigationBarHidden = !state.navigationBarHidden;
+      this.setNavigationBar({ hidden: navigationBarHidden });
+      this.setState({ navigationBarHidden });
+    },
+    toggleTabBar(state) {
+      const tabBarHidden = !state.tabBarHidden;
+      this.setTabBar({ hidden: tabBarHidden });
+      this.setState({ tabBarHidden });
+    },
+  },
+});
+
+function ran(hooks: readonly HookRun[], hook: string): HookRun[] {
+  return [...hooks, { id: hooks.length + 1, hook }];
+}

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

@@ -0,0 +1,17 @@
+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[],
+  // What this page set in Dash's bars.
+  colored: false,
+  navigationBarHidden: false,
+  tabBarHidden: false,
+};