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

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

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

@@ -1,15 +0,0 @@
-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/view.dml

@@ -1,38 +0,0 @@
-<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/layout/controller.ts

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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,
-};

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

@@ -1,34 +0,0 @@
-<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">Dash's bars, which each page sets: this one's title is its number</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Blue bar' }}</Button>
-      <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the navigation bar' : 'Hide the navigation bar' }}</Button>
-      <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
-    </View>
-    <Text variant="caption" tone="muted">Going back to a page shows its bars again, and leaving the dot puts Dash's own back.</Text>
-  </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/templates/showcase/pages/network/controller.ts

@@ -1,107 +0,0 @@
-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 });
-      }
-    },
-  },
-});

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

@@ -1,15 +0,0 @@
-export interface Profile {
-  login: string;
-  name: string;
-  followers: number;
-}
-
-export default {
-  zen: '',
-  profile: null as Profile | null,
-  echo: '',
-  picture: { id: '', url: '', size: 0 },
-  uploaded: '',
-  kept: false,
-  note: '',
-};