@monimesl/dot-cli 0.1.0-alpha.10

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

@@ -0,0 +1,60 @@
+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'];
+
+interface Lookup {
+  results: { collectionId: number; artworkUrl100: string }[];
+}
+
+export default definePage({
+  initialState: state,
+  hooks: {
+    // The shelf's covers come from Apple's catalog.
+    async onLoad() {
+      const ids = this.state.releases.map((release) => release.id).join(',');
+      try {
+        const { body } = await this.dash.network.http.request<Lookup>({
+          url: `https://itunes.apple.com/lookup?id=${ids}`,
+          as: 'json',
+        });
+        const covers = new Map(
+          body.results.map((result) => [
+            result.collectionId,
+            result.artworkUrl100.replace('100x100bb', '300x300bb'),
+          ]),
+        );
+        this.setState((current) => ({
+          releases: current.releases.map((release) => ({
+            ...release,
+            cover: covers.get(release.id) ?? '',
+          })),
+        }));
+      } catch {
+        // Without the catalog, the shelf shows its titles alone.
+      }
+    },
+  },
+  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 }),
+    openSection: (_state, event: DotEvent<unknown, { name: string }>) => ({
+      section: event.data.name,
+    }),
+    showFirst: (_state, event: DotEvent<{ index: number }>) => ({ first: event.detail.index }),
+    shelfStart: () => ({ first: 0 }),
+    shelfEnd: (state) => ({ first: state.releases.length - 1 }),
+    playSong: (state) => ({ playing: !state.playing }),
+  },
+});
+
+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,34 @@
+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 interface Release {
+  // Its id in Apple's catalog, which has its cover.
+  id: number;
+  title: string;
+  year: number;
+  cover: string;
+}
+
+export default {
+  direction: 'row' as Direction,
+  justify: 'start' as Justify,
+  align: 'center' as Align,
+  gap: 'small' as Space,
+  wrap: true,
+  // The section tapped in the grid.
+  section: '',
+  // Whether the tapped song card is playing.
+  playing: false,
+  // Drizilik's releases, newest first, for the shelf.
+  releases: [
+    { id: 6811765244, title: 'AUDACITY', year: 2026, cover: '' },
+    { id: 1788321371, title: 'Wait and See', year: 2025, cover: '' },
+    { id: 1745452762, title: 'Send Money', year: 2024, cover: '' },
+    { id: 1638724918, title: 'Ashobi', year: 2022, cover: '' },
+    { id: 1590578915, title: 'Exodus', year: 2021, cover: '' },
+  ] as Release[],
+  // The release at the start of the shelf.
+  first: 0,
+};

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

@@ -0,0 +1,103 @@
+<View>
+  <Text variant="title">Layout</Text>
+  <Text>A View puts its items in a column or a row. Change the one below.</Text>
+
+  <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
+    <Button variant="secondary">Palm-wine</Button>
+    <Button variant="secondary">Gumbe</Button>
+    <Text variant="title">Afropop</Text>
+    <Button variant="secondary">Bubu</Button>
+    <Text variant="caption" tone="muted">Milo jazz</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 fills the space left over: the song grows, the year does not. Tap the song: a View can be tapped.</Text>
+  <View direction="row" gap="small">
+    <View variant="card" grow onTap="playSong">
+      <Text>{{ playing ? 'Playing Exodus, by Drizilik' : 'Exodus, by Drizilik' }}</Text>
+    </View>
+    <View variant="card">
+      <Text>2021</Text>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">A Scroll moves a row sideways. It stops at the start of each release. The buttons scroll it too.</Text>
+  <Scroll gap="medium" snap="start" index="{{ first }}" onChange="showFirst">
+    <For each="{{ releases }}" item="release" key="id">
+      <View gap="small">
+        <If condition="{{ release.cover }}">
+          <Image src="{{ release.cover }}" alt="{{ release.title }}" width="128" height="128" />
+        </If>
+        <Else>
+          <Skeleton shape="box" height="128" />
+        </Else>
+        <Text weight="medium" maxLines="2">{{ release.title }}</Text>
+        <Text variant="caption" tone="muted">{{ release.year }}</Text>
+      </View>
+    </For>
+  </Scroll>
+  <Text tone="muted">First on the shelf: {{ releases[first].title }}</Text>
+  <View direction="row" gap="small">
+    <Button variant="secondary" onClick="shelfStart" disabled="{{ first === 0 }}">To the start</Button>
+    <Button variant="secondary" onClick="shelfEnd" disabled="{{ first === releases.length - 1 }}">To the end</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">padding, on every side or on one side</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">Text, List, Notice and Grid take padding too</Text>
+  <Notice title="Heads up" paddingTop="large" paddingBottom="large">This notice has large padding above and below.</Notice>
+
+  <Text variant="caption" tone="muted">A Grid keeps its columns the same width</Text>
+  <View variant="card" gap="medium">
+    <Grid columns="4">
+      <GridItem icon="microphone" label="Artists" data-name="Artists" onTap="openSection" />
+      <GridItem icon="music" label="Albums" data-name="Albums" onTap="openSection" />
+      <GridItem icon="playlist" label="Playlists" data-name="Playlists" onTap="openSection" />
+      <GridItem icon="star" label="Charts" badge="New" data-name="Charts" onTap="openSection" />
+      <GridItem icon="calendar" label="Shows" data-name="Shows" onTap="openSection" />
+      <GridItem icon="ticket" label="Tickets" data-name="Tickets" onTap="openSection" />
+      <GridItem icon="headphones" label="Library" data-name="Library" onTap="openSection" />
+      <GridItem image="statics/logo.png" label="Salone" data-name="Salone" onTap="openSection" />
+    </Grid>
+    <If condition="{{ section }}">
+      <Text tone="muted">You tapped {{ section }}</Text>
+    </If>
+  </View>
+</View>

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

@@ -0,0 +1,37 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    choose: (state, event: DotEvent<unknown, { id: string }>) => {
+      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
+      return { chosen: artist?.name ?? '' };
+    },
+    openRelease: (state, event: DotEvent<unknown, { id: string }>) => ({
+      selected: state.releases.find((release) => release.id === event.data.id) ?? null,
+    }),
+    closeSheet: () => ({ selected: null }),
+    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, note } = state.selected;
+      this.setState({ selected: null });
+      await this.dash.system.share({
+        title,
+        text: `${title}, by ${artist} (${year}): ${note.toLowerCase()}.`,
+      });
+    },
+  },
+});

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

@@ -0,0 +1,117 @@
+export interface Artist {
+  id: string;
+  name: string;
+  song: string;
+  genre: string;
+  icon: string;
+}
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  note: string;
+  tone: string;
+}
+
+export default {
+  artists: [
+    {
+      id: 'drizilik',
+      name: 'Drizilik',
+      song: 'Lemonade, with The Therapist',
+      genre: 'Kriofusion',
+      icon: 'microphone',
+    },
+    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats', icon: 'microphone' },
+    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop', icon: 'microphone' },
+    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B', icon: 'microphone' },
+    {
+      id: 'star-zee',
+      name: 'Star Zee',
+      song: 'Leader, with Stonebwoy',
+      genre: 'Hip hop',
+      icon: 'microphone',
+    },
+    {
+      id: 'kao-denero',
+      name: 'Kao Denero',
+      song: 'Kenyatta',
+      genre: 'Hip hop',
+      icon: 'microphone',
+    },
+    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop', icon: 'microphone' },
+    {
+      id: 'k-man',
+      name: 'K-Man',
+      song: 'Leh Wi Make Salone',
+      genre: 'Hip hop',
+      icon: 'microphone',
+    },
+  ] as Artist[],
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+      note: 'Album of the year',
+      tone: 'success',
+    },
+    {
+      id: 'kormot-bi-en-me',
+      title: 'Kormot Bi En Me',
+      artist: 'Steady Bongo',
+      year: 1996,
+      note: 'Best album',
+      tone: 'success',
+    },
+    {
+      id: 'salone',
+      title: 'Salone',
+      artist: 'Bai Kamara Jr.',
+      year: 2020,
+      note: 'Nominated',
+      tone: 'warning',
+    },
+    {
+      id: 'red-album',
+      title: 'Red Album',
+      artist: 'LAJ',
+      year: 2013,
+      note: 'Launched at the stadium',
+      tone: 'info',
+    },
+    {
+      id: 'let-me-love-you',
+      title: 'Let Me Love You',
+      artist: 'Bunny Mack',
+      year: 1981,
+      note: 'Gold disc',
+      tone: 'info',
+    },
+  ] as Release[],
+  chosen: '',
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
+  toast: '',
+  icons: [
+    'music',
+    'playlist',
+    'microphone',
+    'headphones',
+    'ticket',
+    'video',
+    'globe',
+    'link',
+    'external-link',
+    'heart',
+    'star',
+    'share',
+    'download',
+    'calendar',
+    'location',
+    'search',
+  ],
+};

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

@@ -0,0 +1,59 @@
+<View>
+  <Text variant="title">Lists and icons</Text>
+  <Text>A List shows rows in a card. Small lists are compact, and medium lists have more room. A row can show an icon or a picture, a value at its end, and an arrow when you can tap it.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data- attributes tell the page which one.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="{{ artist.icon }}" 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="caption" tone="muted">Famous records in a medium list, each with a badge. Tap one to see its actions.</Text>
+    <List size="md">
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease">
+          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Icons by name, in any tone, including music icons</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</Text>
+    <View variant="card">
+      <Text>Side A</Text>
+      <Divider />
+      <Text>Side B</Text>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeSheet">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</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,65 @@
+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({
+        // The green of Sierra Leone's flag.
+        backgroundColor: colored ? '#1EB53A' : 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,
+};

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

@@ -0,0 +1,34 @@
+<View>
+  <Text variant="caption" tone="muted">{{ trail }}</Text>
+  <Text variant="title">Navigation and hooks</Text>
+  <Text>Each new page opens on top. Back returns to the page below. A dot can have {{ maxDepth }} pages open 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">Each page sets Dash's bars. This page'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' : 'Green 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 shows that page's bars again. Leaving the dot brings back Dash's bars.</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 page runs onHide, then onShow.</Text>
+  </View>
+</View>