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

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

@@ -0,0 +1,75 @@
+export default {
+  // Every icon name, as Icon's name, and ListItem's, Chip's, GridItem's and EmptyState's icon take.
+  names: [
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'bank',
+    'bell',
+    'bolt',
+    'calendar',
+    'card',
+    'cart',
+    'cash',
+    'check',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clock',
+    'close',
+    'copy',
+    'download',
+    'edit',
+    'error',
+    'external-link',
+    'eye',
+    'eye-off',
+    'file',
+    'gift',
+    'globe',
+    'grid',
+    'headphones',
+    'heart',
+    'help',
+    'history',
+    'home',
+    'image',
+    'info',
+    'link',
+    'list',
+    'location',
+    'lock',
+    'logout',
+    'mail',
+    'microphone',
+    'minus',
+    'mobile',
+    'more',
+    'music',
+    'phone',
+    'playlist',
+    'plus',
+    'qr-code',
+    'receipt',
+    'refresh',
+    'search',
+    'send',
+    'settings',
+    'share',
+    'star',
+    'success',
+    'ticket',
+    'trash',
+    'upload',
+    'user',
+    'users',
+    'video',
+    'wallet',
+    'warning',
+    'water',
+    'wifi',
+  ],
+  toast: '',
+};

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

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Icons</Text>
+  <Text>Icon shows a small picture by its name. Lists, chips, grids and empty states take the same names.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">size and tone</Text>
+    <View variant="card" direction="row" wrap gap="large" align="center">
+      <Icon name="music" size="small" />
+      <Icon name="music" size="medium" />
+      <Icon name="music" size="large" />
+      <Icon name="info" tone="info" />
+      <Icon name="success" tone="success" />
+      <Icon name="warning" tone="warning" />
+      <Icon name="error" tone="danger" />
+      <Icon name="star" tone="muted" />
+      <Icon name="heart" tone="default" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Every name</Text>
+    <Text variant="caption" tone="muted">Tap one to copy its name.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <For each="{{ names }}" item="name" key="*this">
+          <View align="center" gap="small" padding="small" data-name="{{ name }}" onTap="copyName">
+            <Icon name="{{ name }}" />
+            <Text variant="caption" tone="muted" align="center">{{ name }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

@@ -0,0 +1,44 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// AUDACITY's id in Apple's catalog; its cover's address can change, so the page looks it up.
+const AUDACITY = 6811765244;
+
+interface Lookup {
+  results: { artworkUrl100: string }[];
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Images' } },
+  hooks: {
+    async onLoad() {
+      try {
+        const { body } = await this.dash.network.http.request<Lookup>({
+          url: `https://itunes.apple.com/lookup?id=${AUDACITY}`,
+          as: 'json',
+        });
+        const artwork = body.results[0]?.artworkUrl100;
+        // The catalog's artwork comes in any size its address names.
+        this.setState(
+          artwork
+            ? { cover: artwork.replace('100x100bb', '600x600bb') }
+            : { coverNote: "Apple's catalog has no cover for it" },
+        );
+      } catch (error) {
+        this.setState({ coverNote: errorMessage(error) });
+      }
+    },
+  },
+  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/components/images/state.ts

@@ -0,0 +1,10 @@
+export default {
+  size: 64,
+  loaded: '',
+  // Built at run time, so the build doesn't check that the file exists.
+  missing: 'statics/missing.png',
+  failure: '',
+  // The cover of Drizilik's album AUDACITY, which the page asks Apple's catalog for.
+  cover: '',
+  coverNote: '',
+};

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

@@ -0,0 +1,83 @@
+<View>
+  <Text variant="title">Images</Text>
+  <Text>Image shows a picture from the dot's statics/ folder or from the web. Give it alt text, which screen readers say aloud.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">From statics/</Text>
+    <Text variant="caption" tone="muted">These pictures come with the dot, and the build checks each one exists.</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">From the web</Text>
+    <Text variant="caption" tone="muted">The cover of Drizilik's album AUDACITY. With aspect="1:1" and no width, it fills the card.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ cover }}">
+        <Image src="{{ cover }}" alt="The cover of AUDACITY, by Drizilik" aspect="1:1" />
+        <Text weight="medium">AUDACITY</Text>
+        <Text variant="caption" tone="muted">Drizilik raps mostly in Krio, in a style called Kriofusion. He won Best Male Artist at the 2026 SLeDU awards.</Text>
+      </If>
+      <ElseIf condition="{{ coverNote }}">
+        <Text variant="caption" tone="muted">{{ coverNote }}</Text>
+      </ElseIf>
+      <Else>
+        <Skeleton shape="box" height="280" />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">shape and fit</Text>
+    <Text variant="caption" tone="muted">Rounded, square or circle. fit="contain" shows the whole picture; cover, the default, fills the box.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Image src="statics/logo.png" alt="Rounded" width="56" height="56" shape="rounded" />
+      <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" />
+      <Image src="statics/logo.png" alt="Covered" width="96" height="56" fit="cover" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onLoad</Text>
+    <Text variant="caption" tone="muted">Tells the page the picture's own size once it loads. The size on screen comes from state here.</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onError</Text>
+    <Text variant="caption" tone="muted">Tells the page why a picture didn't load.</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>
+
+  <View gap="small">
+    <Text variant="subtitle">Avatar</Text>
+    <Text variant="caption" tone="muted">A person's photo, round. Without one, or when it fails to load, their initials show.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Avatar name="Salone Sounds" image="statics/logo.png" size="large" />
+      <Avatar name="Mariama Kamara" size="large" />
+      <Avatar name="Fatmata Conteh" />
+      <Avatar name="Boii" size="small" />
+      <Avatar name="Kao Denero" image="{{ missing }}" />
+    </View>
+    <Text variant="caption" tone="muted">The last one's picture is missing, so it shows KD.</Text>
+  </View>
+</View>

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

@@ -0,0 +1,61 @@
+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,
+  configs: { navigationBar: { title: 'Layout' } },
+  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: DataEvent<{ name: string }>) => ({
+      section: event.data.name,
+    }),
+    showFirst: (_state, event: IndexEvent) => ({ 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/components/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/components/layout/view.dml

@@ -0,0 +1,143 @@
+<View>
+  <Text variant="title">Layout</Text>
+  <Text>Views hold other components and lay them out. Every page starts with one.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">View</Text>
+    <Text variant="caption" tone="muted">A View puts its items in a column or a row. variant="card" gives it a card's look. 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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">grow and onTap</Text>
+    <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. A View can be tapped: tap the song.</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">padding</Text>
+    <Text variant="caption" tone="muted">The space inside the edges, on every side or on one side. Most components take it.</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>
+
+  <View gap="small">
+    <Text variant="subtitle">Stack</Text>
+    <Text variant="caption" tone="muted">A Stack lays its children on top of each other, such as words over a picture.</Text>
+    <Stack radius="large" aspect="16:9">
+      <View background="gold" />
+      <View justify="end" padding="large">
+        <Text variant="subtitle" tone="ink">Bo market day</Text>
+        <Text tone="ink">Every Saturday, from 7 am</Text>
+      </View>
+      <View align="end" padding="medium">
+        <View background="primary" radius="full" paddingStart="small" paddingEnd="small">
+          <Text variant="caption" tone="onPrimary" weight="bold">New</Text>
+        </View>
+      </View>
+    </Stack>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Scroll</Text>
+    <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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Grid</Text>
+    <Text variant="caption" tone="muted">A Grid keeps its columns the same width. A GridItem shows an icon or a picture, with a label.</Text>
+    <View variant="card" gap="medium">
+      <Grid columns="4" gap="small">
+        <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>
+
+  <View gap="small">
+    <Text variant="subtitle">Divider</Text>
+    <Text variant="caption" tone="muted">A line between parts.</Text>
+    <View variant="card">
+      <Text>Side A</Text>
+      <Divider />
+      <Text>Side B</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,18 @@
+import state, { CHART } from './state';
+
+// Rows to add each time the list's end comes into view.
+const MORE = 5;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Lists' } },
+  mutations: {
+    choose: (state, event: DataEvent<{ id: string }>) => {
+      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
+      return { chosen: artist?.name ?? '' };
+    },
+    showMore: (state) => ({ chart: CHART.slice(0, state.chart.length + MORE) }),
+    saveSome: () => ({ saved: ['Exodus, by Drizilik', 'Control, by ApreeL'] }),
+    clearSaved: () => ({ saved: [] }),
+  },
+});

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

@@ -0,0 +1,130 @@
+export interface Artist {
+  id: string;
+  name: string;
+  song: string;
+  genre: string;
+}
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  note: string;
+  tone: string;
+}
+
+export interface ChartSong {
+  id: number;
+  title: string;
+  plays: string;
+}
+
+const TITLES = [
+  'Lemonade',
+  'Control',
+  'Love Na Scam',
+  'Hannah',
+  'Nack',
+  'Exodus',
+  'Ashobi',
+  'Send Money',
+  'Blunt',
+  "O'way",
+  'Shadow',
+  'Leader',
+  'Kenyatta',
+  'Shock',
+  'Leh Wi Make Salone',
+  'Borbor Bele',
+  'Let Me Love You',
+  'Cry Africa',
+  'Corruption',
+  'Ghetto Struggle',
+];
+
+// This week's chart. The list shows the first few, and more as you scroll.
+export const CHART: ChartSong[] = TITLES.map((title, index) => ({
+  id: index + 1,
+  title,
+  plays: `${(20 - index) * 1000} plays`,
+}));
+
+export default {
+  artists: [
+    {
+      id: 'drizilik',
+      name: 'Drizilik',
+      song: 'Lemonade, with The Therapist',
+      genre: 'Kriofusion',
+    },
+    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats' },
+    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop' },
+    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B' },
+    {
+      id: 'star-zee',
+      name: 'Star Zee',
+      song: 'Leader, with Stonebwoy',
+      genre: 'Hip hop',
+    },
+    {
+      id: 'kao-denero',
+      name: 'Kao Denero',
+      song: 'Kenyatta',
+      genre: 'Hip hop',
+    },
+    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop' },
+    {
+      id: 'k-man',
+      name: 'K-Man',
+      song: 'Leh Wi Make Salone',
+      genre: 'Hip hop',
+    },
+  ] 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: '',
+  chart: CHART.slice(0, 8),
+  chartSize: CHART.length,
+  saved: [] as string[],
+};