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

package/dist/{template → templates/showcase}/dot.ts

@@ -6,8 +6,11 @@ export default defineDot({
     'layout',
     'text',
     'images',
+    'carousel',
     'lists',
+    'filters',
     'forms',
+    'payments',
     'feedback',
     'state',
     'navigation',

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    showTip: (_state, event: DotEvent<{ index: number }>) => ({ tip: event.detail.index }),
+    back: (state) => ({ tip: Math.max(state.tip - 1, 0) }),
+    next: (state) => ({ tip: Math.min(state.tip + 1, state.tips.length - 1) }),
+  },
+});

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

@@ -0,0 +1,40 @@
+export interface Promo {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+}
+
+export interface Tip {
+  title: string;
+  text: string;
+}
+
+export default {
+  promos: [
+    {
+      id: 'send',
+      title: 'Send money home',
+      text: 'Free transfers to any mobile wallet this week',
+      icon: 'send',
+    },
+    {
+      id: 'bills',
+      title: 'Pay bills in seconds',
+      text: 'Electricity, water and airtime in one place',
+      icon: 'bolt',
+    },
+    {
+      id: 'save',
+      title: 'Save a little each day',
+      text: 'Set a goal and watch it grow',
+      icon: 'wallet',
+    },
+  ] as Promo[],
+  tips: [
+    { title: 'Welcome', text: 'Swipe, tap a dot, or use the buttons below.' },
+    { title: 'The page decides', text: "The carousel's index comes from state." },
+    { title: 'And hears back', text: 'A swipe raises change, which sets the index again.' },
+  ] as Tip[],
+  tip: 0,
+};

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

@@ -0,0 +1,37 @@
+<View>
+  <Text variant="title">Carousel</Text>
+  <Text>A Carousel shows its children one at a time. Swipe between them, or tap a dot.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Plays by itself and loops, pausing while touched, with a gap between slides that scale in as they come</Text>
+    <Carousel autoplay loop interval="3000" gap="medium" effect="scale">
+      <For each="{{ promos }}" item="promo" key="id">
+        <View variant="card" direction="row" align="center" gap="large">
+          <Icon name="{{ promo.icon }}" size="large" tone="info" />
+          <View gap="small" grow>
+            <Text weight="bold">{{ promo.title }}</Text>
+            <Text tone="muted">{{ promo.text }}</Text>
+          </View>
+        </View>
+      </For>
+    </Carousel>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">The page chooses the slide, and hears when a swipe changes it</Text>
+    <Carousel index="{{ tip }}" onChange="showTip">
+      <For each="{{ tips }}" item="card" key="title">
+        <View variant="card" align="center" gap="medium">
+          <Image src="statics/logo.png" alt="" width="48" height="48" />
+          <Text weight="bold">{{ card.title }}</Text>
+          <Text tone="muted" align="center">{{ card.text }}</Text>
+        </View>
+      </For>
+    </Carousel>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="back" disabled="{{ tip === 0 }}">Back</Button>
+      <Button onClick="next" disabled="{{ tip === tips.length - 1 }}">Next</Button>
+    </View>
+    <Text>Tip {{ tip + 1 }} of {{ tips.length }}</Text>
+  </View>
+</View>

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

@@ -0,0 +1,28 @@
+import type { Payment } from './state';
+import state from './state';
+
+type Chosen = DotEvent<{ value: string }>;
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    chooseTab: (state, event: Chosen) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.payments, tab, state.status) };
+    },
+    chooseStatus: (state, event: DotEvent<unknown, { status: string }>) => {
+      const { status } = event.data;
+      return { status, shown: filter(state.payments, state.tab, status) };
+    },
+    clearFilters: (state) => ({ tab: 'all', status: 'All', shown: state.payments }),
+    choosePeriod: (_state, event: Chosen) => ({ period: event.detail.value }),
+  },
+});
+
+function filter(payments: readonly Payment[], tab: string, status: string): Payment[] {
+  return payments.filter(
+    (payment) =>
+      (tab === 'all' || payment.direction === tab) &&
+      (status === 'All' || payment.status === status),
+  );
+}

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

@@ -0,0 +1,72 @@
+export type Direction = 'in' | 'out';
+export type Status = 'Paid' | 'Pending' | 'Failed';
+
+export interface Payment {
+  id: string;
+  title: string;
+  date: string;
+  amount: string;
+  direction: Direction;
+  status: Status;
+  tone: string;
+}
+
+const payments: Payment[] = [
+  {
+    id: 'p1',
+    title: 'Salary',
+    date: 'Today',
+    amount: 'Le 2,400,000',
+    direction: 'in',
+    status: 'Paid',
+    tone: 'success',
+  },
+  {
+    id: 'p2',
+    title: 'Electricity',
+    date: 'Today',
+    amount: 'Le 50,000',
+    direction: 'out',
+    status: 'Paid',
+    tone: 'success',
+  },
+  {
+    id: 'p3',
+    title: 'From Aminata',
+    date: 'Yesterday',
+    amount: 'Le 75,000',
+    direction: 'in',
+    status: 'Pending',
+    tone: 'warning',
+  },
+  {
+    id: 'p4',
+    title: 'Airtime',
+    date: 'Yesterday',
+    amount: 'Le 10,000',
+    direction: 'out',
+    status: 'Pending',
+    tone: 'warning',
+  },
+  {
+    id: 'p5',
+    title: 'Water',
+    date: '12 September',
+    amount: 'Le 35,000',
+    direction: 'out',
+    status: 'Failed',
+    tone: 'danger',
+  },
+];
+
+export default {
+  payments,
+  // The payments the tab and the chosen status leave.
+  shown: payments,
+  tab: 'all',
+  incoming: payments.filter((payment) => payment.direction === 'in').length,
+  outgoing: payments.filter((payment) => payment.direction === 'out').length,
+  statuses: ['All', 'Paid', 'Pending', 'Failed'],
+  status: 'All',
+  period: 'week',
+};

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

@@ -0,0 +1,43 @@
+<View>
+  <Text variant="title">Tabs and filters</Text>
+  <Text>Tabs switch what a page shows, chips narrow it down, and an empty state says when nothing is left.</Text>
+
+  <Tabs value="{{ tab }}" onChange="chooseTab">
+    <Tab value="all" label="All" />
+    <Tab value="in" label="Incoming" badge="{{ incoming }}" />
+    <Tab value="out" label="Outgoing" badge="{{ outgoing }}" />
+  </Tabs>
+
+  <View direction="row" gap="small" wrap>
+    <For each="{{ statuses }}" item="option" key="*this">
+      <Chip label="{{ option }}" selected="{{ option === status }}" data-status="{{ option }}" onTap="chooseStatus" />
+    </For>
+  </View>
+
+  <If condition="{{ shown.length > 0 }}">
+    <List>
+      <For each="{{ shown }}" item="payment" key="id">
+        <ListItem icon="{{ payment.direction === 'in' ? 'arrow-down' : 'arrow-up' }}" title="{{ payment.title }}" subtitle="{{ payment.date }} · {{ payment.amount }}">
+          <Badge tone="{{ payment.tone }}">{{ payment.status }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <Else>
+    <EmptyState icon="search" title="No payments here" text="Nothing matches this tab and status.">
+      <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+    </EmptyState>
+  </Else>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices</Text>
+    <Tabs variant="segmented" value="{{ period }}" onChange="choosePeriod">
+      <Tab value="week" label="Week" />
+      <Tab value="month" label="Month" />
+      <Tab value="year" label="Year" />
+    </Tabs>
+    <View variant="card">
+      <Text>Spent this {{ period }}: {{ period === 'week' ? 'Le 95,000' : period === 'month' ? 'Le 410,000' : 'Le 4,870,000' }}</Text>
+    </View>
+  </View>
+</View>

package/dist/{template → templates/showcase}/pages/index/state.ts

@@ -19,7 +19,7 @@ export default {
         {
           page: 'layout',
           title: 'Layout',
-          summary: 'Rows, columns, gaps, alignment and cards',
+          summary: 'Rows, columns, grids, gaps, alignment and cards',
           icon: 'grid',
         },
         {
@@ -34,18 +34,36 @@ export default {
           summary: 'Pictures from statics/, their shapes and events',
           icon: 'image',
         },
+        {
+          page: 'carousel',
+          title: 'Carousel',
+          summary: 'Slides to swipe, played by themselves, with dots',
+          icon: 'image',
+        },
         {
           page: 'lists',
           title: 'Lists and icons',
           summary: 'Rows to tap, sheets of actions, badges and icons',
           icon: 'list',
         },
+        {
+          page: 'filters',
+          title: 'Tabs and filters',
+          summary: 'Tabs, chips to narrow a list, and an empty state',
+          icon: 'search',
+        },
         {
           page: 'forms',
           title: 'Forms',
           summary: 'Fields, choices, switches, and a footer to send them',
           icon: 'check',
         },
+        {
+          page: 'payments',
+          title: 'Payments',
+          summary: 'Amounts, one-time codes, PINs and QR codes',
+          icon: 'cash',
+        },
         {
           page: 'feedback',
           title: 'Feedback',

package/dist/{template → templates/showcase}/pages/layout/controller.ts

@@ -14,6 +14,9 @@ export default definePage({
     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,
+    }),
   },
 });
 

package/dist/{template → templates/showcase}/pages/layout/state.ts

@@ -9,4 +9,6 @@ export default {
   align: 'center' as Align,
   gap: 'small' as Space,
   wrap: true,
+  // The service tapped in the grid.
+  service: '',
 };

package/dist/{template → templates/showcase}/pages/layout/view.dml

@@ -60,4 +60,21 @@
       <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/{template → templates/showcase}/pages/navigation/controller.ts

@@ -3,12 +3,15 @@ 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() {
@@ -34,6 +37,25 @@ export default definePage({
     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 });
+    },
   },
 });
 

package/dist/{template → templates/showcase}/pages/navigation/state.ts

@@ -10,4 +10,8 @@ export default {
   from: '',
   trail: '',
   hooks: [] as HookRun[],
+  // What this page set in Dash's bars.
+  colored: false,
+  navigationBarHidden: false,
+  tabBarHidden: false,
 };

package/dist/{template → templates/showcase}/pages/navigation/view.dml

@@ -14,6 +14,16 @@
     </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">

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

@@ -0,0 +1,42 @@
+import state from './state';
+
+type Typed = DotEvent<{ value: string }>;
+
+// The code this page accepts; a real dot checks it with its server.
+const RIGHT_CODE = '123456';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
+      const amount = event.detail.value;
+      if (!amount) {
+        return { amount, amountText: '', request: '' };
+      }
+      return {
+        amount,
+        amountText: groupThousands(amount),
+        request: `https://pay.example.com/request?amount=${amount}&currency=SLE`,
+      };
+    },
+    setCode: (_state, event: Typed) => ({ code: event.detail.value, codeError: '' }),
+    checkCode: (_state, event: Typed) => {
+      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: Typed) => ({ pin: event.detail.value }),
+  },
+});
+
+// 1250000 -> "1,250,000"
+function groupThousands(amount: number): string {
+  const digits = String(Math.round(amount));
+  const groups: string[] = [];
+  for (let end = digits.length; end > 0; end -= 3) {
+    groups.unshift(digits.slice(Math.max(0, end - 3), end));
+  }
+  return groups.join(',');
+}

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

@@ -0,0 +1,10 @@
+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: '',
+};

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

@@ -0,0 +1,35 @@
+<View>
+  <Text variant="title">Payments</Text>
+  <Text>Fields for money and codes, and a QR code to be paid with.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">An amount, grouped as it's typed and sent to the page as a number</Text>
+    <AmountInput label="Amount to request" currency="Le" value="{{ amount }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <View variant="card" align="center" gap="medium">
+      <If condition="{{ request }}">
+        <QRCode value="{{ request }}" size="180" label="A QR code to pay Le {{ amountText }}" />
+        <Text tone="muted">Scan to pay Le {{ amountText }}</Text>
+      </If>
+      <Else>
+        <EmptyState icon="qr-code" title="No amount yet" text="Type an amount above to make a QR code for it." />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A one-time code: type it, paste it, or let the phone fill it in from an SMS</Text>
+    <If condition="{{ verified }}">
+      <Notice tone="success" title="Code accepted">The payment is 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="For this page, it's 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A PIN, hidden as it's typed</Text>
+    <CodeInput label="PIN" length="4" secure value="{{ pin }}" onChange="setPin" />
+    <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+  </View>
+</View>

package/dist/templates/starter/.env

@@ -0,0 +1,3 @@
+# Public configuration for the dot. Anyone with the dot can read these variables: never put a
+# secret here. Read them in the service as `env.GREETING`.
+GREETING=Hello from your dot

package/dist/templates/starter/dot.ts

@@ -0,0 +1,3 @@
+export default defineDot({
+  pages: ['index'],
+});

package/dist/templates/starter/pages/index/controller.ts

@@ -0,0 +1,9 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    increment: (state) => ({ count: state.count + 1 }),
+    reset: () => ({ count: 0 }),
+  },
+});

package/dist/templates/starter/pages/index/state.ts

@@ -0,0 +1,4 @@
+export default {
+  greeting: env.GREETING,
+  count: 0,
+};

package/dist/templates/starter/pages/index/view.dml

@@ -0,0 +1,16 @@
+<View>
+  <View direction="row" align="center" gap="medium">
+    <Image src="statics/logo.png" alt="Logo" width="40" height="40" />
+    <Text variant="title">{{ greeting }}</Text>
+  </View>
+  <Text>Change pages/index/view.dml and save: the simulator shows it at once.</Text>
+
+  <View variant="card" align="center" gap="medium">
+    <Text variant="title">{{ count }}</Text>
+    <Text tone="muted">{{ count === 1 ? 'tap' : 'taps' }} so far</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
+      <Button onClick="increment">Tap me</Button>
+    </View>
+  </View>
+</View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -22,18 +22,19 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@monimesl/dot-compiler": "0.1.0-alpha.3",
-    "@monimesl/dot-core": "0.1.0-alpha.3",
-    "@monimesl/dot-script-parser": "0.1.0-alpha.3",
-    "@monimesl/dot-dml-parser": "0.1.0-alpha.3",
-    "@monimesl/dot-simulator": "0.1.0-alpha.3"
+    "typescript": "^5.9.3",
+    "uqr": "^0.1.3",
+    "@monimesl/dot-compiler": "0.1.0-alpha.4",
+    "@monimesl/dot-core": "0.1.0-alpha.4",
+    "@monimesl/dot-dml-parser": "0.1.0-alpha.4",
+    "@monimesl/dot-script-parser": "0.1.0-alpha.4",
+    "@monimesl/dot-simulator": "0.1.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "tsdown": "^0.23.0",
-    "typescript": "^5.9.3",
     "vitest": "^5.0.1",
     "vscode-languageserver": "^9.0.1",
     "vscode-languageserver-protocol": "^3.17.5",