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

package/dist/templates/showcase/pages/components/lists/view.dml

@@ -0,0 +1,88 @@
+<View>
+  <Text variant="title">Lists</Text>
+  <Text>A List shows rows in a card. A ListItem can show an icon or a picture, a subtitle, and a value or a badge at its end. A row you can tap shows an arrow.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">List and ListItem</Text>
+    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data-id tells the page which one.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" subtitle="{{ artist.song }}" value="{{ artist.genre }}" data-id="{{ artist.id }}" onTap="choose" />
+      </For>
+    </List>
+    <If condition="{{ chosen }}">
+      <Text>You chose {{ chosen }}</Text>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">size="md", with a picture and a badge</Text>
+    <Text variant="caption" tone="muted">Medium lists have more room. A ListItem's children show at its end, in place of value.</Text>
+    <List size="md">
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem image="statics/logo.png" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}">
+          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onEndReached</Text>
+    <Text variant="caption" tone="muted">Comes when the last row scrolls into view, so the page can add more. {{ chart.length }} of {{ chartSize }} songs so far.</Text>
+    <List onEndReached="showMore">
+      <For each="{{ chart }}" item="song" key="id">
+        <ListItem title="{{ song.id }}. {{ song.title }}" value="{{ song.plays }}" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DetailRow</Text>
+    <Text variant="caption" tone="muted">A label with its value, such as on a receipt. tone and weight change the value.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="Show" value="Salone Sounds Live" />
+      <DetailRow label="Seats" value="2, near the stage" tone="muted" />
+      <DetailRow label="Doors open" value="18:00" tone="info" />
+      <DetailRow label="Status" value="Paid" tone="success" />
+      <DetailRow label="Refunds" value="Not after Friday" tone="warning" />
+      <DetailRow label="Total" value="SLE 800" weight="bold" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Disclosure</Text>
+    <Text variant="caption" tone="muted">A row that opens to show more, such as an answer. The person opens and closes it, and open sets how it starts.</Text>
+    <View variant="card" gap="none">
+      <Disclosure title="Can I get a refund?" subtitle="Tickets and refunds" open>
+        <Text>Yes, until the Friday before the show. After that, you can give your ticket to someone else.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="When do doors open?">
+        <Text>At 6 pm. The music starts at 7.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="Is there parking?">
+        <Text>Yes, at the Lumley junction car park, a short walk away.</Text>
+      </Disclosure>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">EmptyState</Text>
+    <Text variant="caption" tone="muted">Shows when a list has nothing in it, with a way forward.</Text>
+    <View variant="card">
+      <If condition="{{ saved.length > 0 }}">
+        <For each="{{ saved }}" item="title" key="*this">
+          <Text>{{ title }}</Text>
+        </For>
+        <Button variant="secondary" onClick="clearSaved">Clear</Button>
+      </If>
+      <Else>
+        <EmptyState icon="heart" title="No saved songs" text="Save a song to find it here later.">
+          <Button variant="secondary" onClick="saveSome">Save two songs</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/money/controller.ts

@@ -0,0 +1,45 @@
+import state from './state';
+
+// The code this page accepts; a real dot checks it with its server.
+const RIGHT_CODE = '123456';
+
+// In dollars, as the pledge field sends them.
+const MAX_PLEDGE = 1000;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Money and codes' } },
+  mutations: {
+    setAmount: (_state, event: ValueEvent<number | null>) => {
+      const amount = event.detail.value;
+      if (!amount) {
+        return { amount, amountText: '', request: '' };
+      }
+      return {
+        amount,
+        amountText: (amount / 100).toLocaleString('en-US', { minimumFractionDigits: 2 }),
+        request: `https://pay.example.com/tip?amount=${amount}&currency=SLE&in=cents`,
+      };
+    },
+    setCode: (_state, event: ValueEvent) => ({ code: event.detail.value, codeError: '' }),
+    checkCode: (_state, event: ValueEvent) => {
+      if (event.detail.value === RIGHT_CODE) {
+        return { verified: true };
+      }
+      return { code: '', codeError: 'That code is wrong. Try again.' };
+    },
+    startAgain: () => ({ verified: false, code: '' }),
+    setPin: (_state, event: ValueEvent) => ({ pin: event.detail.value }),
+    clearPin: () => ({ pin: '' }),
+    setLocked: (_state, event: CheckedEvent) => ({
+      locked: event.detail.checked,
+    }),
+    setPledge: (_state, event: ValueEvent<number | null>) => {
+      const pledge = event.detail.value;
+      return {
+        pledge,
+        pledgeError: pledge !== null && pledge > MAX_PLEDGE ? 'Pledge up to USD 1,000' : '',
+      };
+    },
+  },
+});

package/dist/templates/showcase/pages/components/money/state.ts

@@ -0,0 +1,13 @@
+export default {
+  amount: null as number | null,
+  // The amount with its thousands grouped, and what the QR code asks for.
+  amountText: '',
+  request: '',
+  code: '',
+  codeError: '',
+  verified: false,
+  pin: '',
+  locked: false,
+  pledge: null as number | null,
+  pledgeError: '',
+};

package/dist/templates/showcase/pages/components/money/view.dml

@@ -0,0 +1,54 @@
+<View>
+  <Text variant="title">Money and codes</Text>
+  <Text>Fields for amounts and codes, and QR codes to scan. Tip the band, pledge to its tour, and confirm your tickets.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">AmountInput</Text>
+    <Text variant="caption" tone="muted">Formats the amount as you type. It sends a number in cents, the minor unit, so 150 is SLE 1.50.</Text>
+    <AmountInput label="Tip for the band" placeholder="0.00" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Switch label="Lock the tip" checked="{{ locked }}" onChange="setLocked" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">QRCode</Text>
+    <Text variant="caption" tone="muted">Shows text, such as a payment link, as a QR code. It's dark on light in every theme, so any camera can read it.</Text>
+    <View variant="card" align="center" gap="medium">
+      <If condition="{{ request }}">
+        <QRCode value="{{ request }}" size="180" label="A QR code to tip SLE {{ amountText }}" />
+        <Text tone="muted">Scan to tip the band SLE {{ amountText }}</Text>
+      </If>
+      <Else>
+        <EmptyState icon="qr-code" title="No tip yet" text="Type an amount above to make a QR code the crowd can scan." />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">currency, unit and minorUnits</Text>
+    <Text variant="caption" tone="muted">In US dollars. unit="major" sends dollars, not cents, and minorUnits="0" leaves the cents off.</Text>
+    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" minorUnits="0" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">CodeInput</Text>
+    <Text variant="caption" tone="muted">A one-time code, one box per digit. Type it, paste it, or let the phone fill it from an SMS. onComplete comes when the last box fills.</Text>
+    <If condition="{{ verified }}">
+      <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
+      <Button variant="secondary" onClick="startAgain">Start again</Button>
+    </If>
+    <Else>
+      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="Use 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A PIN</Text>
+    <Text variant="caption" tone="muted">length="4" and secure, which hides the digits. Here it locks once complete.</Text>
+    <CodeInput label="PIN" length="4" secure value="{{ pin }}" disabled="{{ pin.length === 4 }}" onChange="setPin" />
+    <View direction="row" align="center" gap="small">
+      <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+      <View grow />
+      <Button variant="secondary" onClick="clearPin" disabled="{{ pin.length === 0 }}">Clear the PIN</Button>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/reading/controller.ts

@@ -0,0 +1,6 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Reading' } },
+});

package/dist/templates/showcase/pages/components/reading/state.ts

@@ -0,0 +1,23 @@
+// As a news app would get an article's body from its server. The lines are joined here so the
+// production build stays on one line.
+const body = [
+  "## What's on sale",
+  '',
+  'Stalls opened before dawn, and by eight the **rice** sellers had a queue. Prices are set each morning and shown at the gate:',
+  '',
+  '- Rice, a cup: SLE 5',
+  '- Palm oil, a pint: SLE 12',
+  '- Pepper, a heap: SLE 3',
+  '',
+  "> The roof keeps the rain off. That's half the battle in July.",
+  '',
+  "Read the [council's notice](https://example.com/lumley-market) for opening hours, or see _Getting there_ below.",
+  '',
+  '### Getting there',
+  '',
+  'Poda-podas from Lumley junction stop at the gate. The car park opens next month.',
+].join('\n');
+
+export default {
+  body,
+};

package/dist/templates/showcase/pages/components/reading/view.dml

@@ -0,0 +1,42 @@
+<View>
+  <Text variant="title">Reading</Text>
+  <Text>Prose lays out long text, such as a news story, so it reads well. Quote sets someone's words apart. BulletList lists points. RichText draws Markdown from a server.</Text>
+  <Divider />
+
+  <Prose>
+    <Text variant="caption" tone="muted" weight="medium">FREETOWN · 11 OCTOBER</Text>
+    <Text variant="title">Lumley's new market opens to traders and a long queue</Text>
+    <Text variant="lead">More than two hundred traders moved into the covered market on Saturday, the first in the west of the city.</Text>
+    <Text variant="caption" tone="muted">By Mariama Kamara</Text>
+    <Text>The market took two years to build, on the old lorry park by the junction. Each trader has:</Text>
+    <BulletList>
+      <Bullet>
+        <Text>a stall with a lock</Text>
+      </Bullet>
+      <Bullet>
+        <Text>water at both ends of the hall</Text>
+      </Bullet>
+      <Bullet>
+        <Text>a place in the car park, from next month</Text>
+      </Bullet>
+    </BulletList>
+    <Quote cite="Fatmata Conteh, who sells cloth">
+      <Text>For twelve years I sold under an umbrella. Now I have a door that closes.</Text>
+    </Quote>
+    <Text>The council says it will open a second market in Kissy next year. <Text weight="bold">Stalls there are free</Text> for the first six months. To get one:</Text>
+    <BulletList ordered>
+      <Bullet>
+        <Text>Register at the council office in Lumley.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Bring a photo and your trader's card.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Wait for an SMS with your stall number.</Text>
+      </Bullet>
+    </BulletList>
+    <Divider />
+    <Text variant="caption" tone="muted">The rest of the story comes as Markdown from the newsroom's server, drawn by RichText.</Text>
+  </Prose>
+  <RichText markdown="{{ body }}" />
+</View>

package/dist/templates/showcase/pages/components/sheets/controller.ts

@@ -0,0 +1,36 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Sheets' } },
+  mutations: {
+    openRelease: (state, event: DataEvent<{ id: string }>) => ({
+      selected: state.releases.find((release) => release.id === event.data.id) ?? null,
+    }),
+    // A sheet doesn't close itself: the page sets `open` back to false.
+    closeRelease: () => ({ selected: null }),
+    openRating: () => ({ rating: true }),
+    closeRating: () => ({ rating: false }),
+    setStars: (_state, event: ValueEvent<number>) => ({ stars: event.detail.value }),
+    saveRating: (state) => ({ rating: false, saved: state.stars, toast: 'Thanks for rating' }),
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyTitle(state) {
+      if (!state.selected) {
+        return;
+      }
+      const { title, artist } = state.selected;
+      await this.dash.system.copyText(`${title}, by ${artist}`);
+      this.setState({ selected: null, toast: 'Title copied' });
+    },
+    async shareRelease(state) {
+      if (!state.selected) {
+        return;
+      }
+      const { title, artist, year } = state.selected;
+      this.setState({ selected: null });
+      await this.dash.system.share({ title, text: `${title}, by ${artist} (${year})` });
+    },
+  },
+});

package/dist/templates/showcase/pages/components/sheets/state.ts

@@ -0,0 +1,26 @@
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+}
+
+export default {
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+    },
+    { id: 'kormot-bi-en-me', title: 'Kormot Bi En Me', artist: 'Steady Bongo', year: 1996 },
+    { id: 'borbor-bele', title: 'Borbor Bele', artist: 'Emmerson', year: 2004 },
+  ] as Release[],
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
+  // The rating sheet, and the rating it last saved.
+  rating: false,
+  stars: 3,
+  saved: 0,
+  toast: '',
+};

package/dist/templates/showcase/pages/components/sheets/view.dml

@@ -0,0 +1,38 @@
+<View>
+  <Text variant="title">Sheets</Text>
+  <Text>A Sheet slides up over the page while open is true. Tapping outside it, or its close icon, raises onClose. The page closes it by setting open back to false.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">An action sheet</Text>
+    <Text variant="caption" tone="muted">Tap a record to see what you can do with it.</Text>
+    <List>
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem icon="music" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A sheet with a form</Text>
+    <Text variant="caption" tone="muted">Any component can go in a sheet. This one has no close icon, and more room inside.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <View grow>
+        <Text>{{ saved ? 'You gave ' + saved + ' stars' : 'Not rated yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="openRating">Rate the show</Button>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeRelease">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</Button>
+    <Button onClick="closeRelease">Cancel</Button>
+  </Sheet>
+
+  <Sheet open="{{ rating }}" title="Rate Salone Sounds Live" padding="large" onClose="closeRating">
+    <Slider label="Stars" min="1" max="5" showValue value="{{ stars }}" onChange="setStars" />
+    <Button onClick="saveRating">Save</Button>
+  </Sheet>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

package/dist/templates/showcase/pages/components/styles/controller.ts

@@ -0,0 +1,6 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Styles' } },
+});

package/dist/templates/showcase/pages/components/styles/state.ts

@@ -0,0 +1,3 @@
+export default {
+  balance: 'SLE 1,250.00',
+};

package/dist/templates/showcase/pages/components/styles/view.dml

@@ -0,0 +1,101 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>A View's colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">With primary, write text with tone="onPrimary" so it reads.</Text>
+    <View background="primary" radius="large" padding="large" gap="small">
+      <Text variant="caption" tone="onPrimary">Your balance</Text>
+      <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+    </View>
+    <Text variant="caption" tone="muted">The page's own colours</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="background" border="subtle" radius="medium" padding="small">
+        <Text>background</Text>
+      </View>
+      <View background="surface" border="subtle" radius="medium" padding="small">
+        <Text>surface</Text>
+      </View>
+      <View background="muted" radius="medium" padding="small">
+        <Text>muted</Text>
+      </View>
+    </View>
+    <Text variant="caption" tone="muted">A tone is a soft tint</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="info" radius="medium" padding="small">
+        <Text tone="info" weight="medium">New</Text>
+      </View>
+      <View background="success" radius="medium" padding="small">
+        <Text tone="success" weight="medium">Paid</Text>
+      </View>
+      <View background="warning" radius="medium" padding="small">
+        <Text tone="warning" weight="medium">Due Friday</Text>
+      </View>
+      <View background="danger" radius="medium" padding="small">
+        <Text tone="danger" weight="medium">Failed</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Theme colours</Text>
+    <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts: gold and ink. Use the names as a background or a text tone.</Text>
+    <View direction="row" gap="small" align="center">
+      <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+        <Text weight="medium" tone="ink">Gold member</Text>
+      </View>
+      <Text tone="gold" weight="bold">Since 2024</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">border and radius</Text>
+    <Text variant="caption" tone="muted">border is none, subtle or strong. radius rounds the corners, and full makes a circle or a pill.</Text>
+    <View direction="row" gap="medium" align="end" wrap>
+      <View width="56" height="56" background="muted" radius="none" />
+      <View width="56" height="56" background="muted" radius="small" />
+      <View width="56" height="56" background="muted" radius="medium" />
+      <View width="56" height="56" background="muted" radius="large" />
+      <View width="56" height="56" background="muted" radius="full" />
+      <View width="56" height="56" border="subtle" radius="medium" />
+      <View width="56" height="56" border="strong" radius="medium" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">width and height</Text>
+    <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>
+    <View background="muted" radius="medium" width="120" height="40" justify="center" align="center">
+      <Text>120 points</Text>
+    </View>
+    <View background="muted" radius="medium" width="fill" height="40" justify="center" align="center">
+      <Text>fill</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">minHeight, maxWidth and aspect</Text>
+    <Text variant="caption" tone="muted">minHeight keeps a box tall when it holds little. maxWidth stops it growing too wide. aspect sets its height from its width.</Text>
+    <View variant="card" minHeight="96" justify="center">
+      <Text>At least 96 points tall</Text>
+    </View>
+    <View variant="card" maxWidth="200">
+      <Text>No wider than 200 points, however wide the phone is</Text>
+    </View>
+    <View background="muted" radius="large" aspect="16:9" justify="center" align="center">
+      <Text>16:9</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Together</Text>
+    <Text variant="caption" tone="muted">A price with even digits, and the old one crossed out.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Text variant="subtitle">Freetown Jazz Night</Text>
+      <View grow />
+      <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+      <Text weight="bold" numeric>SLE 120</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/tabs/controller.ts

@@ -0,0 +1,41 @@
+import type { Release } from './state';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Tabs and chips' } },
+  mutations: {
+    chooseTab: (state, event: ValueEvent) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.releases, { ...state, tab }) };
+    },
+    chooseGenre: (state, event: DataEvent<{ genre: string }>) => {
+      const { genre } = event.data;
+      return { genre, shown: filter(state.releases, { ...state, genre }) };
+    },
+    search: (state, event: ValueEvent) => {
+      const query = event.detail.value;
+      return { query, shown: filter(state.releases, { ...state, query }) };
+    },
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', query: '', shown: state.releases }),
+    chooseWhere: (_state, event: ValueEvent) => ({ where: event.detail.value }),
+    toggleLiked: (state) => ({ liked: !state.liked }),
+  },
+});
+
+interface Filters {
+  tab: string;
+  genre: string;
+  // Words the title contains, in any case.
+  query: string;
+}
+
+function filter(releases: readonly Release[], { tab, genre, query }: Filters): Release[] {
+  const words = query.trim().toLowerCase();
+  return releases.filter(
+    (release) =>
+      (tab === 'all' || release.kind === tab) &&
+      (genre === 'All' || release.genre === genre) &&
+      release.title.toLowerCase().includes(words),
+  );
+}