@canva/cli 1.19.0 → 1.21.0

package/templates/mls/src/adapter.ts

@@ -1,126 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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>
-  );
-};