@cavulsqa/create 2.9.2 → 2.10.0

package/templates/m3e-app/src/modules/gallery/composables/useChatDemo.ts

@@ -0,0 +1,299 @@
+import {
+  applyReaction,
+  applyRsvp,
+  applyVote,
+  type ChatMessage,
+  type MessageContact,
+  type MessageInvite,
+  type MessageLocation,
+  type MessageImage,
+  type MessagePoll,
+  type MessageReaction,
+  type MessageStatus,
+  type RsvpAnswer,
+} from "@cavulsqa/m3e-vue";
+import { teammateAnswer, teammateVote } from "@/modules/gallery/composables/chatTeam";
+
+const AMINA = "Amina Benali";
+const KARIM = "Karim Haddad";
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const OLDER_PAGES = 3;
+const PAGE_SIZE = 10;
+
+type Line = [author: string | null, key: string];
+
+const OLDER: readonly Line[] = [
+  [AMINA, "o1"],
+  [null, "o2"],
+  [KARIM, "o3"],
+  [AMINA, "o4"],
+  [null, "o5"],
+];
+
+const TEAM_REACTIONS = ["❤️", "👍", "🔥", "😂"] as const;
+
+function joinReaction(
+  reactions: readonly MessageReaction[] | undefined,
+  emoji: string,
+  name: string,
+): MessageReaction[] {
+  const at = Date.now();
+  const list = [...(reactions ?? [])];
+  const index = list.findIndex((reaction) => reaction.emoji === emoji);
+  const existing = list[index];
+  if (existing)
+    list[index] = {
+      ...existing,
+      count: (existing.count ?? 1) + 1,
+      by: [...(existing.by ?? []), name],
+      at,
+    };
+  else list.push({ emoji, count: 1, by: [name], at });
+  return list;
+}
+
+const REPLIES: readonly Line[] = [
+  [AMINA, "r1"],
+  [KARIM, "r2"],
+  [AMINA, "r3"],
+  [KARIM, "r4"],
+];
+
+/**
+ * A team conversation that behaves like a live one without a server: history pages in from above,
+ * a sent message walks through sending, sent and delivered, a teammate types and answers, and the
+ * answer marks what you sent as read - and they react to it, springing onto the bubble. Every timer is
+ * cleared with the page.
+ */
+export function useChatDemo(photo: (index: number) => MessageImage | null) {
+  const { t } = useI18n();
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+  const messages = shallowRef<ChatMessage[]>([]);
+  const typing = shallowRef<{ author: string } | false>(false);
+  const draft = ref("");
+  let sequence = 0;
+  let pages = 0;
+  let replies = 0;
+  let attached = 0;
+
+  const id = () => `m${(sequence += 1)}`;
+
+  function later(ms: number, run: () => void) {
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      run();
+    }, ms);
+    timers.add(timer);
+  }
+
+  function text(author: string | null, key: string, at: number): ChatMessage {
+    return author
+      ? { id: id(), sent: false, author, at, text: t(`gallery.chat.lines.${key}`) }
+      : { id: id(), sent: true, at, text: t(`gallery.chat.lines.${key}`), status: "read" };
+  }
+
+  function seed() {
+    const now = Date.now();
+    const today = new Date(now).setHours(9, 12, 0, 0);
+    const morning = Math.min(today, now - 2 * HOUR);
+    const image = photo(1);
+    messages.value = [
+      text(AMINA, "s1", now - 2 * DAY),
+      text(null, "s2", now - 2 * DAY + 4 * MINUTE),
+      text(AMINA, "s3", now - DAY),
+      {
+        ...text(null, "s4", now - DAY + 2 * MINUTE),
+        reactions: [{ emoji: "🔥", count: 2, by: [AMINA, KARIM] }],
+      },
+      text(null, "s5", now - DAY + 3 * MINUTE),
+      { id: id(), sent: false, author: AMINA, at: now - DAY + 5 * MINUTE, text: "👏" },
+      {
+        id: id(),
+        sent: false,
+        author: KARIM,
+        at: morning,
+        text: t("gallery.chat.lines.s6"),
+        ...(image ? { image } : {}),
+      },
+      {
+        ...text(AMINA, "s7", morning + 3 * MINUTE),
+        reactions: [{ emoji: "👍", mine: true }],
+      },
+      text(null, "s8", morning + 6 * MINUTE),
+      { ...text(null, "s9", morning + 7 * MINUTE), status: "failed" },
+    ];
+  }
+
+  function update(target: string | number, change: (message: ChatMessage) => ChatMessage) {
+    messages.value = messages.value.map((message) =>
+      message.id === target ? change(message) : message,
+    );
+  }
+
+  function react(message: ChatMessage, emoji: string | null) {
+    update(message.id, (entry) => ({ ...entry, reactions: applyReaction(entry.reactions, emoji) }));
+  }
+
+  function setStatus(target: string | number, status: MessageStatus) {
+    update(target, (message) => ({ ...message, status }));
+  }
+
+  function deliver(target: string | number) {
+    later(700, () => setStatus(target, "sent"));
+    later(1600, () => setStatus(target, "delivered"));
+  }
+
+  function reply() {
+    const [author, key] = REPLIES[replies % REPLIES.length]!;
+    replies += 1;
+    later(2200, () => (typing.value = { author: author! }));
+    later(4600, () => {
+      typing.value = false;
+      const lastSent = messages.value.findLast((message) => message.sent);
+      if (lastSent && replies % 2 === 1) {
+        const emoji = TEAM_REACTIONS[(replies >> 1) % TEAM_REACTIONS.length]!;
+        update(lastSent.id, (entry) => ({
+          ...entry,
+          reactions: joinReaction(entry.reactions, emoji, author!),
+        }));
+      }
+      messages.value = [
+        ...messages.value.map((message) =>
+          message.sent && message.status === "delivered"
+            ? { ...message, status: "read" as const }
+            : message,
+        ),
+        text(author, key, Date.now()),
+      ];
+    });
+  }
+
+  type Outgoing = Omit<ChatMessage, "id" | "sent" | "at" | "status">;
+
+  /** Posts without a reply: the team answers a poll or an invite instead of writing back. */
+  function postQuietly(message: Outgoing) {
+    const next: ChatMessage = {
+      ...message,
+      id: id(),
+      sent: true,
+      at: Date.now(),
+      status: "sending",
+    };
+    messages.value = [...messages.value, next];
+    deliver(next.id);
+    return next.id;
+  }
+
+  function post(message: Outgoing) {
+    postQuietly(message);
+    reply();
+  }
+
+  function send(value: string) {
+    post({ text: value });
+  }
+
+  function sendPhoto(index?: number) {
+    attached += 1;
+    const image = photo(index ?? attached * 2);
+    if (image) post({ image });
+  }
+
+  function sendImage(image: MessageImage) {
+    post({ image });
+  }
+
+  function sendLocation(location: MessageLocation) {
+    post({ location });
+  }
+
+  function sendContact(contact: MessageContact) {
+    post({ contact });
+  }
+
+  /** A poll the team answers: one vote soon, another a little later. */
+  function sendPoll(poll: MessagePoll) {
+    const next = postQuietly({ poll });
+    later(1800, () => update(next, (entry) => withPoll(entry, (value) => teammateVote(value, 0))));
+    later(3400, () => update(next, (entry) => withPoll(entry, (value) => teammateVote(value, 1))));
+  }
+
+  /** An invite the team answers: one is going, one may come. */
+  function sendInvite(invite: MessageInvite) {
+    const next = postQuietly({ invite });
+    later(1800, () =>
+      update(next, (entry) => withInvite(entry, (value) => teammateAnswer(value, "going"))),
+    );
+    later(3400, () =>
+      update(next, (entry) => withInvite(entry, (value) => teammateAnswer(value, "maybe"))),
+    );
+  }
+
+  function vote(message: ChatMessage, optionId: string) {
+    update(message.id, (entry) => withPoll(entry, (value) => applyVote(value, optionId)));
+  }
+
+  function rsvp(message: ChatMessage, answer: RsvpAnswer) {
+    update(message.id, (entry) => withInvite(entry, (value) => applyRsvp(value, answer)));
+  }
+
+  function withPoll(message: ChatMessage, change: (poll: MessagePoll) => MessagePoll): ChatMessage {
+    return message.poll ? { ...message, poll: change(message.poll) } : message;
+  }
+
+  function withInvite(
+    message: ChatMessage,
+    change: (invite: MessageInvite) => MessageInvite,
+  ): ChatMessage {
+    return message.invite ? { ...message, invite: change(message.invite) } : message;
+  }
+
+  function retry(message: ChatMessage) {
+    setStatus(message.id, "sending");
+    deliver(message.id);
+  }
+
+  function remove(message: ChatMessage) {
+    messages.value = messages.value.filter((entry) => entry.id !== message.id);
+  }
+
+  async function loadOlder(): Promise<boolean> {
+    if (pages >= OLDER_PAGES) return false;
+    await new Promise<void>((resolve) => later(700, resolve));
+    pages += 1;
+    const oldest = messages.value[0] ? new Date(messages.value[0].at).getTime() : Date.now();
+    const page = Array.from({ length: PAGE_SIZE }, (_, index) => {
+      const [author, key] = OLDER[(index + pages) % OLDER.length]!;
+      return text(author, key, oldest - DAY - (PAGE_SIZE - index) * 3 * MINUTE);
+    });
+    messages.value = [...page, ...messages.value];
+    return pages < OLDER_PAGES;
+  }
+
+  onMounted(seed);
+  onScopeDispose(() => {
+    for (const timer of timers) clearTimeout(timer);
+    timers.clear();
+  });
+
+  return {
+    messages,
+    typing,
+    draft,
+    send,
+    sendPhoto,
+    sendImage,
+    sendLocation,
+    sendContact,
+    sendPoll,
+    sendInvite,
+    vote,
+    rsvp,
+    react,
+    retry,
+    remove,
+    loadOlder,
+  };
+}

package/templates/m3e-app/src/modules/gallery/composables/useGallerySections.ts

@@ -0,0 +1,230 @@
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import { defineAsyncComponent, type Component } from "vue";
+import AnimationIcon from "~icons/material-symbols/animation-rounded";
+import CheckIcon from "~icons/material-symbols/check-rounded";
+import EditIcon from "~icons/material-symbols/edit-outline-rounded";
+import InventoryIcon from "~icons/material-symbols/inventory-2-outline-rounded";
+import AddIcon from "~icons/material-symbols/add-rounded";
+import MenuIcon from "~icons/material-symbols/menu-rounded";
+import ShapesIcon from "~icons/material-symbols/shapes-outline-rounded";
+import WidgetsIcon from "~icons/material-symbols/widgets-outline-rounded";
+import TuneIcon from "~icons/material-symbols/tune-rounded";
+import TabsIcon from "~icons/material-symbols/tab-outline-rounded";
+import TableIcon from "~icons/material-symbols/table-outline-rounded";
+import ChartIcon from "~icons/material-symbols/monitoring-rounded";
+import ContactsIcon from "~icons/material-symbols/contacts-outline-rounded";
+import ChatIcon from "~icons/material-symbols/forum-outline-rounded";
+import LoginIcon from "~icons/material-symbols/login-rounded";
+import AgendaIcon from "~icons/material-symbols/event-note-outline-rounded";
+import OnboardingIcon from "~icons/material-symbols/swipe-rounded";
+import CalendarIcon from "~icons/material-symbols/calendar-today-outline-rounded";
+import SpeedIcon from "~icons/material-symbols/speed-rounded";
+import CarouselIcon from "~icons/material-symbols/view-carousel-outline-rounded";
+import type { Tone } from "@/shared/utils/tone";
+
+export interface GallerySection {
+  id: string;
+  icon: Component;
+  shape: MaterialShapeName;
+  tone: Tone;
+  titleKey: string;
+  subtitleKey: string;
+  /** Loaded only when the section opens, so the gallery index stays light. */
+  component: Component;
+  /** A section with its own route, for a demo that needs the page's app bar. */
+  path?: string;
+}
+
+const section = (
+  id: string,
+  icon: Component,
+  shape: MaterialShapeName,
+  tone: Tone,
+  load: () => Promise<{ default: Component }>,
+): GallerySection => ({
+  id,
+  icon,
+  shape,
+  tone,
+  titleKey: `gallery.sections.${id}.title`,
+  subtitleKey: `gallery.sections.${id}.subtitle`,
+  component: defineAsyncComponent(load),
+});
+
+/** One page per component family, each demonstrating its variants against the spec. */
+export const sections: readonly GallerySection[] = [
+  section(
+    "buttons",
+    WidgetsIcon,
+    "cookie9Sided",
+    "primary",
+    () => import("../components/sections/GalleryButtons.vue"),
+  ),
+  section(
+    "fabs",
+    AddIcon,
+    "cookie4Sided",
+    "tertiary",
+    () => import("../components/sections/GalleryFabs.vue"),
+  ),
+  section(
+    "progress",
+    AnimationIcon,
+    "softBurst",
+    "secondary",
+    () => import("../components/sections/GalleryProgress.vue"),
+  ),
+  section(
+    "shapes",
+    ShapesIcon,
+    "flower",
+    "primary",
+    () => import("../components/sections/GalleryShapes.vue"),
+  ),
+  section(
+    "navigation",
+    MenuIcon,
+    "pill",
+    "secondary",
+    () => import("../components/sections/GalleryNavigation.vue"),
+  ),
+  section(
+    "overlays",
+    InventoryIcon,
+    "clover4Leaf",
+    "tertiary",
+    () => import("../components/sections/GalleryOverlays.vue"),
+  ),
+  section(
+    "selection",
+    CheckIcon,
+    "sunny",
+    "primary",
+    () => import("../components/sections/GallerySelection.vue"),
+  ),
+  section(
+    "pickers",
+    CalendarIcon,
+    "cookie12Sided",
+    "tertiary",
+    () => import("../components/sections/GalleryPickers.vue"),
+  ),
+  section(
+    "scale",
+    SpeedIcon,
+    "softBurst",
+    "secondary",
+    () => import("../components/sections/GalleryScale.vue"),
+  ),
+  section(
+    "inputs",
+    EditIcon,
+    "gem",
+    "secondary",
+    () => import("../components/sections/GalleryInputs.vue"),
+  ),
+  section(
+    "carousels",
+    CarouselIcon,
+    "cookie12Sided",
+    "primary",
+    () => import("../components/sections/GalleryCarousels.vue"),
+  ),
+  section(
+    "tables",
+    TableIcon,
+    "square",
+    "secondary",
+    () => import("../components/sections/GalleryTables.vue"),
+  ),
+  section(
+    "charts",
+    ChartIcon,
+    "sunny",
+    "tertiary",
+    () => import("../components/sections/GalleryCharts.vue"),
+  ),
+  section(
+    "surfaces",
+    TuneIcon,
+    "pentagon",
+    "tertiary",
+    () => import("../components/sections/GallerySurfaces.vue"),
+  ),
+];
+
+/** Tabs pinned under the app bar need the whole page, so they have their own route. */
+export const TABS_SECTION: GallerySection = {
+  id: "tabs",
+  icon: TabsIcon,
+  shape: "pill",
+  tone: "primary",
+  titleKey: "gallery.sections.tabs.title",
+  subtitleKey: "gallery.sections.tabs.subtitle",
+  component: { render: () => null },
+  path: "/gallery/tabs/",
+};
+
+/** Groups pinned under the app bar with an index rail in the page's fixed layer. */
+export const CONTACTS_SECTION: GallerySection = {
+  id: "contacts",
+  icon: ContactsIcon,
+  shape: "clover4Leaf",
+  tone: "secondary",
+  titleKey: "gallery.sections.contacts.title",
+  subtitleKey: "gallery.sections.contacts.subtitle",
+  component: { render: () => null },
+  path: "/gallery/contacts/",
+};
+
+/** A conversation with its composer pinned to the page's bottom edge. */
+export const CHAT_SECTION: GallerySection = {
+  id: "chat",
+  icon: ChatIcon,
+  shape: "softBurst",
+  tone: "primary",
+  titleKey: "gallery.sections.chat.title",
+  subtitleKey: "gallery.sections.chat.subtitle",
+  component: { render: () => null },
+  path: "/gallery/chat/",
+};
+
+/** Full-height pages swiped one at a time, with Skip and Next beside the page dots. */
+export const ONBOARDING_SECTION: GallerySection = {
+  id: "onboarding",
+  icon: OnboardingIcon,
+  shape: "sunny",
+  tone: "tertiary",
+  titleKey: "gallery.sections.onboarding.title",
+  subtitleKey: "gallery.sections.onboarding.subtitle",
+  component: { render: () => null },
+  path: "/gallery/onboarding/",
+};
+
+/** A sign-in screen: validation, a password toggle, a draft of the email. */
+export const LOGIN_SECTION: GallerySection = {
+  id: "login",
+  icon: LoginIcon,
+  shape: "cookie12Sided",
+  tone: "secondary",
+  titleKey: "gallery.sections.login.title",
+  subtitleKey: "gallery.sections.login.subtitle",
+  component: { render: () => null },
+  path: "/gallery/login/",
+};
+
+/** The route agenda: day, week and month views over the same visits. */
+export const AGENDA_SECTION: GallerySection = {
+  id: "agenda",
+  icon: AgendaIcon,
+  shape: "cookie9Sided",
+  tone: "primary",
+  titleKey: "gallery.sections.agenda.title",
+  subtitleKey: "gallery.sections.agenda.subtitle",
+  component: { render: () => null },
+  path: "/gallery/agenda/",
+};
+
+export function findSection(id: string): GallerySection | undefined {
+  return sections.find((entry) => entry.id === id);
+}

package/templates/m3e-app/src/modules/gallery/composables/useLocalAttachments.ts

@@ -0,0 +1,71 @@
+import type { MessageImage } from "@cavulsqa/m3e-vue";
+
+const MAX_EDGE = 16_384;
+
+/**
+ * Turns files picked on the device - the gallery, the camera, any file - into what a message
+ * carries, with no native plugin: Capacitor's web view answers a file input with the system picker,
+ * and `capture` opens the camera. Images become object URLs measured once; every URL is revoked
+ * with the page, so a long chat does not hold photos in memory after it closes.
+ */
+export function useLocalAttachments() {
+  const urls = new Set<string>();
+
+  async function measure(file: File): Promise<{ width: number; height: number }> {
+    if (typeof createImageBitmap === "function") {
+      const bitmap = await createImageBitmap(file);
+      try {
+        return { width: bitmap.width, height: bitmap.height };
+      } finally {
+        bitmap.close();
+      }
+    }
+    const url = URL.createObjectURL(file);
+    try {
+      const image = new Image();
+      image.src = url;
+      await image.decode();
+      return { width: image.naturalWidth, height: image.naturalHeight };
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  /** An image file as a message image, or `null` when it cannot be read as one. */
+  async function toImage(file: File): Promise<MessageImage | null> {
+    if (!file.type.startsWith("image/")) return null;
+    try {
+      const { width, height } = await measure(file);
+      if (!width || !height || Math.max(width, height) > MAX_EDGE) return null;
+      const src = URL.createObjectURL(file);
+      urls.add(src);
+      return { src, width, height, alt: file.name };
+    } catch {
+      return null;
+    }
+  }
+
+  function describe(file: File, locale: string): string {
+    const units = ["byte", "kilobyte", "megabyte", "gigabyte"] as const;
+    let size = file.size;
+    let unit = 0;
+    while (size >= 1024 && unit < units.length - 1) {
+      size /= 1024;
+      unit += 1;
+    }
+    const amount = new Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: units[unit],
+      unitDisplay: "short",
+      maximumFractionDigits: unit === 0 ? 0 : 1,
+    }).format(size);
+    return `📄 ${file.name} · ${amount}`;
+  }
+
+  onScopeDispose(() => {
+    for (const url of urls) URL.revokeObjectURL(url);
+    urls.clear();
+  });
+
+  return { toImage, describe };
+}

package/templates/m3e-app/src/modules/gallery/composables/useLocationShare.ts

@@ -0,0 +1,38 @@
+import type { MessageLocation } from "@cavulsqa/m3e-vue";
+import { currentPosition, PositionError } from "@/modules/gallery/composables/currentPosition";
+
+const DEPOT = { lat: 35.69739, lng: -0.63309 } as const;
+
+/**
+ * Shares where the device is. A second tap while a fix is pending is ignored rather than queued, and
+ * every way the lookup can fail - no permission, no fix, too slow, no geolocation at all - says which
+ * one it was and offers the depot instead, so the demo still has something to send on an emulator.
+ */
+export function useLocationShare(send: (location: MessageLocation) => void) {
+  const { t } = useI18n();
+  const snackbar = useSnackbar();
+  const locating = shallowRef(false);
+
+  async function share() {
+    if (locating.value) return;
+    locating.value = true;
+    let reason: PositionError["reason"];
+    try {
+      const at = await currentPosition();
+      send({ ...at, label: t("gallery.chat.location.here") });
+      return;
+    } catch (error) {
+      reason = error instanceof PositionError ? error.reason : "unavailable";
+    } finally {
+      locating.value = false;
+    }
+    const result = await snackbar.show({
+      message: t(`gallery.chat.location.${reason}`),
+      action: t("gallery.chat.location.sendDepot"),
+      duration: "long",
+    });
+    if (result === "action") send({ ...DEPOT, label: t("gallery.chat.location.depot") });
+  }
+
+  return { locating, share };
+}