@canva/cli 1.10.0 → 1.12.0

package/templates/mls/src/adapter.ts

@@ -0,0 +1,126 @@
+import { agents, listings } from "./data";
+import type { Agent, Office, Property } from "./real_estate.type";
+
+// TODO (App Developer): replace with the real API call
+export const fetchAgents = async (
+  office?: Office | null,
+  query?: string,
+  continuation?: string,
+  sortBy?: string,
+): Promise<{ agents: Agent[]; continuation?: string }> => {
+  // eslint-disable-next-line no-console
+  console.log("fetchingAgents", { query, continuation, office });
+
+  if (office?.id === "listings-only-office" || office?.id === "empty-office") {
+    return { agents: [], continuation: undefined };
+  }
+
+  if (office?.id === "error-office" || query === "error") {
+    throw new Error("Error fetching agents");
+  }
+  // Apply sorting
+  if (sortBy) {
+    const [field, direction] = sortBy.split("-");
+
+    if (field === "name") {
+      agents.sort((a, b) => {
+        const comparison = a.name.localeCompare(b.name);
+        return direction === "asc" ? comparison : -comparison;
+      });
+    }
+  }
+
+  // Simulate a delay
+  await new Promise((resolve) => setTimeout(resolve, 10));
+
+  let filteredAgents = agents;
+
+  // Apply search query
+  if (query) {
+    filteredAgents = filteredAgents.filter(
+      (agent) =>
+        agent.name.toLowerCase().includes(query.toLowerCase()) ||
+        (agent.officeId &&
+          agent.officeId.toLowerCase().includes(query.toLowerCase())),
+    );
+  }
+
+  if (filteredAgents.length === 0) {
+    return { agents: [], continuation: undefined };
+  }
+
+  return {
+    agents: filteredAgents,
+    continuation:
+      continuation && !query ? `${Number(continuation) + 1}` : undefined,
+  };
+};
+
+// TODO (App Developer): replace with real API calls
+export const fetchListings = async (
+  office?: Office | null,
+  query?: string,
+  propertyType?: string | null,
+  sortBy?: string | null,
+  continuation?: string,
+): Promise<{ listings: Property[]; continuation?: string }> => {
+  // eslint-disable-next-line no-console
+  console.log("fetchingListings", {
+    query,
+    continuation,
+    propertyType,
+    sortBy,
+  });
+  // Simulate a delay
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  if (office?.id === "empty-office" || office?.id === "agents-only-office") {
+    return { listings: [], continuation: undefined };
+  }
+
+  if (office?.id === "error-office" || query === "error") {
+    throw new Error("Error fetching listings");
+  }
+
+  let filteredListings = listings;
+
+  // Example filters
+  // Apply property type filter
+  if (propertyType) {
+    filteredListings = filteredListings.filter(
+      (listing) =>
+        listing.listingType.toLowerCase() === propertyType.toLowerCase(),
+    );
+  }
+
+  // Apply sorting filter
+  if (sortBy) {
+    filteredListings = [...filteredListings].sort((a, b) => {
+      const aPrice = parseFloat(a.price.replace(/[$,]/g, ""));
+      const bPrice = parseFloat(b.price.replace(/[$,]/g, ""));
+      return sortBy === "price-asc" ? aPrice - bPrice : bPrice - aPrice;
+    });
+  }
+
+  // Apply search query
+  if (query) {
+    filteredListings = filteredListings.filter(
+      (listing) =>
+        listing.address.toLowerCase().includes(query.toLowerCase()) ||
+        listing.suburb.toLowerCase().includes(query.toLowerCase()) ||
+        listing.description.toLowerCase().includes(query.toLowerCase()) ||
+        listing.name.toLowerCase().includes(query.toLowerCase()) ||
+        listing.title.toLowerCase().includes(query.toLowerCase()),
+    );
+  }
+
+  if (filteredListings.length === 0) {
+    return { listings: [], continuation: undefined };
+  }
+
+  return {
+    listings: filteredListings,
+    continuation:
+      continuation && !query ? `${Number(continuation) + 1}` : undefined,
+  };
+};

package/templates/mls/src/components/agent/agent_card.tsx

@@ -0,0 +1,57 @@
+import { HorizontalCard, ImageCard } from "@canva/app-ui-kit";
+import React from "react";
+import { useIntl } from "react-intl";
+import type { Agent } from "../../real_estate.type";
+
+interface AgentCardProps {
+  item: Agent;
+  onClick: (item: Agent) => void;
+}
+
+export const ListAgentCard: React.FC<AgentCardProps> = ({ item, onClick }) => {
+  const intl = useIntl();
+  const headshot = item.headshots?.[0];
+
+  return (
+    <HorizontalCard
+      ariaLabel={item.name}
+      title={item.name}
+      description={item.officeId}
+      onClick={() => onClick(item)}
+      thumbnail={
+        headshot
+          ? {
+              url: headshot.url,
+              alt: intl.formatMessage(
+                {
+                  defaultMessage: "Profile photo of {name}",
+                  description: "Alt text for agent profile photo",
+                },
+                { name: item.name },
+              ),
+            }
+          : undefined
+      }
+    />
+  );
+};
+
+export const GridAgentCard: React.FC<AgentCardProps> = ({ item, onClick }) => {
+  const intl = useIntl();
+
+  return (
+    <ImageCard
+      selectable
+      thumbnailUrl={item.headshots?.[0]?.url || ""}
+      alt={intl.formatMessage(
+        {
+          defaultMessage: "Profile photo of {name}",
+          description: "Alt text for agent profile photo",
+        },
+        { name: item.name },
+      )}
+      thumbnailHeight={150}
+      onClick={() => onClick(item)}
+    />
+  );
+};

package/templates/mls/src/components/agent/agent_grid.tsx

@@ -0,0 +1,37 @@
+import { Column, Columns, Rows } from "@canva/app-ui-kit";
+import type { Agent } from "../../real_estate.type";
+import { GridAgentCard } from "./agent_card";
+
+interface AgentGridProps {
+  agents: Agent[];
+  onAgentClick: (item: Agent) => void;
+}
+
+export const AgentGrid = ({ agents, onAgentClick }: AgentGridProps) => {
+  return (
+    <Rows spacing="2u">
+      {agents.map((item, index) => {
+        if (index % 2 === 0) {
+          const nextItem = agents[index + 1];
+          return (
+            <Columns
+              key={`row-${Math.floor(index / 2)}`}
+              spacing="2u"
+              alignY="stretch"
+            >
+              <Column key={item.id} width="1/2">
+                <GridAgentCard item={item} onClick={onAgentClick} />
+              </Column>
+              {nextItem && (
+                <Column key={nextItem.id} width="1/2">
+                  <GridAgentCard item={nextItem} onClick={onAgentClick} />
+                </Column>
+              )}
+            </Columns>
+          );
+        }
+        return null;
+      })}
+    </Rows>
+  );
+};

package/templates/mls/src/components/agent/agent_list.tsx

@@ -0,0 +1,17 @@
+import type { Agent } from "../../real_estate.type";
+import { ListAgentCard } from "./agent_card";
+
+interface AgentListProps {
+  agents: Agent[];
+  onAgentClick: (item: Agent) => void;
+}
+
+export const AgentList = ({ agents, onAgentClick }: AgentListProps) => {
+  return (
+    <>
+      {agents.map((item: Agent) => (
+        <ListAgentCard key={item.id} item={item} onClick={onAgentClick} />
+      ))}
+    </>
+  );
+};

package/templates/mls/src/components/agent/agent_search_filters.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  Column,
+  Columns,
+  GridViewIcon,
+  ListBulletLtrIcon,
+  Rows,
+  SearchInputMenu,
+  Select,
+} from "@canva/app-ui-kit";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+type Layout = "grid" | "list";
+
+interface AgentSearchFiltersProps {
+  query: string;
+  onQueryChange: (query: string) => void;
+  layout: Layout;
+  onLayoutToggle: () => void;
+  sort: string;
+  onSortChange: (sort: string) => void;
+}
+
+export const AgentSearchFilters = ({
+  query,
+  onQueryChange,
+  layout,
+  onLayoutToggle,
+  sort,
+  onSortChange,
+}: AgentSearchFiltersProps) => {
+  const intl = useIntl();
+  const [queryValue, setQueryValue] = useState(query);
+  return (
+    <Rows spacing="2u">
+      <SearchInputMenu
+        value={queryValue}
+        onChange={setQueryValue}
+        onChangeComplete={() => onQueryChange(queryValue)}
+        onClear={() => {
+          setQueryValue("");
+          onQueryChange("");
+        }}
+        placeholder={intl.formatMessage({
+          defaultMessage: "Search agents...",
+          description: "Placeholder text for agents search input",
+        })}
+      />
+      <Columns spacing="1u" alignY="center">
+        <Column width="content">
+          <Button
+            icon={layout === "grid" ? GridViewIcon : ListBulletLtrIcon}
+            type="button"
+            onClick={onLayoutToggle}
+            variant="secondary"
+          />
+        </Column>
+        <Column width="1/3">
+          <Select
+            value={sort}
+            onChange={onSortChange}
+            options={[
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Name: A to Z",
+                  description: "Sort option - name ascending",
+                }),
+                value: "name-asc",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Name: Z to A",
+                  description: "Sort option - name descending",
+                }),
+                value: "name-desc",
+              },
+            ]}
+            placeholder={intl.formatMessage({
+              defaultMessage: "Sort by",
+              description: "Placeholder text for agents sort dropdown",
+            })}
+          />
+        </Column>
+      </Columns>
+    </Rows>
+  );
+};

package/templates/mls/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,40 @@
+import {
+  ArrowLeftIcon,
+  Button,
+  Column,
+  Columns,
+  Text,
+} from "@canva/app-ui-kit";
+import { useIntl } from "react-intl";
+import { useLocation, useNavigate } from "react-router-dom";
+import type { Office } from "../../real_estate.type";
+
+export const Breadcrumb = () => {
+  const office = (useLocation().state as { office: Office })?.office;
+  const navigate = useNavigate();
+  const intl = useIntl();
+
+  return (
+    <Columns spacing="1u" alignY="center">
+      <Column width="content">
+        <Button
+          icon={ArrowLeftIcon}
+          size="small"
+          type="button"
+          variant="tertiary"
+          onClick={() => navigate("/entry")}
+        />
+      </Column>
+      <Column>
+        <Text variant="bold">
+          {office
+            ? office.name
+            : intl.formatMessage({
+                defaultMessage: "Back",
+                description: "Back button",
+              })}
+        </Text>
+      </Column>
+    </Columns>
+  );
+};

package/templates/mls/src/components/listing/listing_card.tsx

@@ -0,0 +1,64 @@
+import { HorizontalCard, ImageCard, Rows, Text } from "@canva/app-ui-kit";
+import type { Property } from "../../real_estate.type";
+
+export interface ListingCardProps<T extends Property> {
+  item: T;
+  onClick?: (item: T) => void;
+}
+
+interface BaseListingCardProps<T extends Property> {
+  item: T;
+  onClick?: (item: T) => void;
+}
+
+export const GridListingCard = <T extends Property>({
+  item,
+  onClick,
+}: BaseListingCardProps<T>) => {
+  const handleClick = () => {
+    onClick?.(item);
+  };
+
+  return (
+    <div>
+      <Rows spacing="1u">
+        <ImageCard
+          selectable
+          thumbnailUrl={item.thumbnail.url}
+          alt={item.description}
+          borderRadius="standard"
+          onClick={handleClick}
+          thumbnailHeight={110}
+        />
+        <Rows spacing="0">
+          <Text variant="bold" lineClamp={1}>
+            {item.title}
+          </Text>
+          {item.suburb && <Text size="small">{item.suburb}</Text>}
+        </Rows>
+      </Rows>
+    </div>
+  );
+};
+
+export const ListListingCard = <T extends Property>({
+  item,
+  onClick,
+}: BaseListingCardProps<T>) => {
+  const handleClick = () => {
+    onClick?.(item);
+  };
+
+  return (
+    <HorizontalCard
+      ariaLabel={item.title}
+      title={item.title}
+      description={item.suburb}
+      onClick={handleClick}
+      thumbnail={{
+        url: item.thumbnail.url,
+        alt: item.description,
+      }}
+    />
+  );
+};

package/templates/mls/src/components/listing/listing_grid.tsx

@@ -0,0 +1,37 @@
+import { Column, Columns, Rows } from "@canva/app-ui-kit";
+import type { Property } from "../../real_estate.type";
+import { GridListingCard } from "./listing_card";
+
+interface ListingGridProps {
+  listings: Property[];
+  onListingClick: (item: Property) => void;
+}
+
+export const ListingGrid = ({ listings, onListingClick }: ListingGridProps) => {
+  return (
+    <Rows spacing="2u">
+      {listings.map((item, index) => {
+        if (index % 2 === 0) {
+          const nextItem = listings[index + 1];
+          return (
+            <Columns
+              key={`row-${Math.floor(index / 2)}`}
+              spacing="2u"
+              alignY="stretch"
+            >
+              <Column key={item.id} width="1/2">
+                <GridListingCard item={item} onClick={onListingClick} />
+              </Column>
+              {nextItem && (
+                <Column key={nextItem.id} width="1/2">
+                  <GridListingCard item={nextItem} onClick={onListingClick} />
+                </Column>
+              )}
+            </Columns>
+          );
+        }
+        return null;
+      })}
+    </Rows>
+  );
+};

package/templates/mls/src/components/listing/listing_list.tsx

@@ -0,0 +1,21 @@
+import type { Property } from "../../real_estate.type";
+import { ListListingCard } from "./listing_card";
+
+interface ListingListProps {
+  listings: Property[];
+  onListingClick: (item: Property) => void;
+}
+
+export const ListingList = ({ listings, onListingClick }: ListingListProps) => {
+  return (
+    <>
+      {listings.map((item: Property, index: number) => (
+        <ListListingCard
+          key={`${item.id}-${index}`}
+          item={item}
+          onClick={onListingClick}
+        />
+      ))}
+    </>
+  );
+};

package/templates/mls/src/components/listing/listing_search_filters.tsx

@@ -0,0 +1,145 @@
+import {
+  Button,
+  Column,
+  Columns,
+  GridViewIcon,
+  ListBulletLtrIcon,
+  Rows,
+  SearchInputMenu,
+  Select,
+} from "@canva/app-ui-kit";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+type Layout = "grid" | "list";
+
+interface ListingSearchFiltersProps {
+  query: string;
+  onQueryChange: (query: string) => void;
+  layout: Layout;
+  onLayoutToggle: () => void;
+  propertyType: string;
+  onPropertyTypeChange: (type: string) => void;
+  sort: string;
+  onSortChange: (sort: string) => void;
+}
+
+export const ListingSearchFilters = ({
+  query,
+  onQueryChange,
+  layout,
+  onLayoutToggle,
+  propertyType,
+  onPropertyTypeChange,
+  sort,
+  onSortChange,
+}: ListingSearchFiltersProps) => {
+  const intl = useIntl();
+  const [queryValue, setQueryValue] = useState(query);
+  return (
+    <Rows spacing="2u">
+      <SearchInputMenu
+        value={queryValue}
+        onChange={setQueryValue}
+        onChangeComplete={() => onQueryChange(queryValue)}
+        onClear={() => {
+          setQueryValue("");
+          onQueryChange("");
+        }}
+        placeholder={intl.formatMessage({
+          defaultMessage: "Search listings...",
+          description: "Placeholder text for listings search input",
+        })}
+      />
+      <Columns spacing="1u" alignY="center">
+        <Column width="content">
+          <Button
+            icon={layout === "grid" ? GridViewIcon : ListBulletLtrIcon}
+            type="button"
+            onClick={onLayoutToggle}
+            variant="secondary"
+            ariaLabel={intl.formatMessage(
+              {
+                defaultMessage:
+                  "Toggle layout between grid and list. Current layout is {currentLayout}",
+                description: "Aria label for layout toggle button",
+              },
+              {
+                currentLayout:
+                  layout === "grid"
+                    ? intl.formatMessage({
+                        defaultMessage: "grid",
+                        description: "Layout option",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "list",
+                        description: "Layout option",
+                      }),
+              },
+            )}
+          />
+        </Column>
+        <Column width="1/3">
+          {/* TODO (App Developer): Review filter options and update to match your specific property data shape */}
+          <Select
+            value={propertyType}
+            onChange={onPropertyTypeChange}
+            options={[
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "House",
+                  description: "Property type option - house",
+                }),
+                value: "house",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Apartment",
+                  description: "Property type option - apartment",
+                }),
+                value: "apartment",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Townhouse",
+                  description: "Property type option - townhouse",
+                }),
+                value: "townhouse",
+              },
+            ]}
+            placeholder={intl.formatMessage({
+              defaultMessage: "Property type",
+              description: "Placeholder text for property type dropdown",
+            })}
+          />
+        </Column>
+        <Column width="1/3">
+          <Select
+            value={sort}
+            onChange={onSortChange}
+            options={[
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Price: Low to High",
+                  description: "Sort option - price ascending",
+                }),
+                value: "price-asc",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Price: High to Low",
+                  description: "Sort option - price descending",
+                }),
+                value: "price-desc",
+              },
+            ]}
+            placeholder={intl.formatMessage({
+              defaultMessage: "Sort by",
+              description: "Placeholder text for sort dropdown",
+            })}
+          />
+        </Column>
+      </Columns>
+    </Rows>
+  );
+};