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

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

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

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

@@ -1,63 +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>
-</View>

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

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

@@ -1,13 +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[],
-};

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

@@ -1,24 +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">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

@@ -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/template/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: '',
-};

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

@@ -1,56 +0,0 @@
-<View>
-  <Text variant="title">Network</Text>
-  <Text>Dash sends a dot's requests, and only to the hosts its dot.json lists.</Text>
-
-  <Text variant="caption" tone="muted">A request, read as text</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="fetchZen">Ask GitHub for wisdom</Button>
-    <If condition="{{ zen }}">
-      <Text>"{{ zen }}"</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">JSON, parsed with as: 'json'</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="fetchProfile">Load a profile</Button>
-      <Button variant="secondary" onClick="sendJson">Send JSON</Button>
-    </View>
-    <If condition="{{ profile }}">
-      <Text>{{ profile.name }} (@{{ profile.login }}) has {{ profile.followers }} followers</Text>
-    </If>
-    <If condition="{{ echo }}">
-      <Text>httpbin got {{ echo }}</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">Files: download, upload and keep</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="download">Download</Button>
-      <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
-      <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
-      <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
-    </View>
-    <If condition="{{ picture.url }}">
-      <View direction="row" align="center" gap="medium">
-        <Image src="{{ picture.url }}" alt="Octocat" width="64" height="64" />
-        <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
-      </View>
-    </If>
-    <If condition="{{ uploaded }}">
-      <Text>httpbin got the file field "{{ uploaded }}"</Text>
-    </If>
-    <If condition="{{ kept }}">
-      <Text>Kept in the dot's own files: see the Files page</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">A host dot.json doesn't list</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
-    <If condition="{{ note }}">
-      <Text variant="caption" tone="muted">{{ note }}</Text>
-    </If>
-  </View>
-</View>

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

@@ -1,33 +0,0 @@
-<View>
-  <Text variant="title">State, mutations and actions</Text>
-  <Text>The page's state lives in the controller. A mutation turns an event into new state; an action can run several, or wait for Dash.</Text>
-
-  <View variant="card" gap="small">
-    <Text variant="title">{{ count }} of {{ limit }} {{ title }}</Text>
-    <If condition="{{ count >= limit }}">
-      <Text>That's the limit</Text>
-    </If>
-    <ElseIf condition="{{ count > 0 }}">
-      <Text>{{ limit - count }} to go</Text>
-    </ElseIf>
-    <Else>
-      <Text>Tap Add one to start</Text>
-    </Else>
-    <View direction="row" wrap gap="small">
-      <Button onClick="increment" disabled="{{ count >= limit }}">Add one</Button>
-      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Fill up</Button>
-      <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
-      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
-    </View>
-  </View>
-
-  <Text variant="caption" tone="muted">Each tap, newest first</Text>
-  <View variant="card" gap="small">
-    <For each="{{ taps }}" index="position" item="tap" key="id">
-      <Text>{{ position + 1 }}. Tap #{{ tap.id }}</Text>
-    </For>
-    <If condition="{{ taps.length === 0 }}">
-      <Text variant="caption" tone="muted">No taps yet</Text>
-    </If>
-  </View>
-</View>

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

@@ -1,10 +0,0 @@
-import state from './state';
-
-export default definePage({
-  initialState: state,
-  mutations: {
-    addOne: (state) => ({ quantity: state.quantity + 1 }),
-    removeOne: (state) => ({ quantity: Math.max(0, state.quantity - 1) }),
-    toggleNickname: (state) => ({ nickname: state.nickname === null ? 'Countess' : null }),
-  },
-});

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

@@ -1,7 +0,0 @@
-export default {
-  name: 'Ada',
-  nickname: null as string | null,
-  price: 2.5,
-  quantity: 4,
-  tags: ['fast', 'small', 'typed'],
-};

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

@@ -1,49 +0,0 @@
-<View>
-  <Text variant="title">Text and bindings</Text>
-
-  <View variant="card" gap="small">
-    <Text variant="title">A title</Text>
-    <Text>Body text, the default</Text>
-    <Text variant="caption" tone="muted">A caption</Text>
-    <Text>Text can hold{{ ' ' }}<Text variant="title">bigger</Text>{{ ' ' }}and{{ ' ' }}<Text variant="caption" tone="muted">smaller</Text>{{ ' ' }}words.</Text>
-  </View>
-
-  <Text variant="caption" tone="muted">Tones, weights and alignment</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="medium">
-      <Text tone="muted">muted</Text>
-      <Text tone="info">info</Text>
-      <Text tone="success">success</Text>
-      <Text tone="warning">warning</Text>
-      <Text tone="danger">danger</Text>
-    </View>
-    <View direction="row" gap="medium">
-      <Text weight="regular">regular</Text>
-      <Text weight="medium">medium</Text>
-      <Text weight="bold">bold</Text>
-    </View>
-    <Text align="center">In the center</Text>
-    <Text align="end">At the end</Text>
-    <Text maxLines="2">A long description is cut off after the lines you allow, so a list of them stays tidy however much each one says about itself.</Text>
-  </View>
-
-  <Text variant="caption" tone="muted">Bindings put state into the view</Text>
-  <View variant="card" gap="small">
-    <Text>Hello, {{ name }}</Text>
-    <Text>{{ quantity }} {{ quantity === 1 ? 'item' : 'items' }} at {{ price }} each: {{ quantity * price }}</Text>
-    <Text>Nickname: {{ nickname ?? 'none yet' }}</Text>
-    <Text>{{ tags.length }} tags, the first is "{{ tags[0] }}"</Text>
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="addOne">Add one</Button>
-      <Button variant="secondary" onClick="removeOne" disabled="{{ quantity === 0 }}">Remove one</Button>
-      <Button variant="secondary" onClick="toggleNickname">{{ nickname === null ? 'Give a nickname' : 'Drop the nickname' }}</Button>
-    </View>
-  </View>
-
-  <Text variant="caption" tone="muted">A list, one line per item</Text>
-  <View variant="card" gap="small">
-    <For each="{{ tags }}" item="tag" index="position" key="*this">
-      <Text>{{ position + 1 }}. {{ tag }}</Text>
-    </For>
-  </View>
-</View>