@canva/cli 1.11.0 → 1.13.0

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>
+  );
+};

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

@@ -0,0 +1,65 @@
+import {
+  Box,
+  Column,
+  Columns,
+  Placeholder,
+  Rows,
+  TextPlaceholder,
+  TitlePlaceholder,
+} from "@canva/app-ui-kit";
+import React from "react";
+
+export const ListPlaceholder = () => (
+  <Columns spacing="2u" align="start" alignY="stretch">
+    <Column width="content">
+      <Box width="full" height="full">
+        <div
+          style={{
+            height: "60px",
+            width: "60px",
+            paddingLeft: "var(--ui-kit-space-050)",
+          }}
+        >
+          <Placeholder shape="rectangle" />
+        </div>
+      </Box>
+    </Column>
+    <Column width="fluid">
+      <Rows spacing="0">
+        <TitlePlaceholder />
+        <TextPlaceholder />
+      </Rows>
+    </Column>
+  </Columns>
+);
+
+export const GridPlaceholder = () => (
+  <Columns spacing="2u" alignY="stretch">
+    <Column width="1/2">
+      <Rows spacing="1u">
+        <Box width="full" height="full">
+          <div style={{ height: "120px" }}>
+            <Placeholder shape="rectangle" />
+          </div>
+        </Box>
+        <Rows spacing="0">
+          <TitlePlaceholder />
+          <TitlePlaceholder size="small" />
+        </Rows>
+      </Rows>
+    </Column>
+    <Column width="1/2">
+      <Rows spacing="1u">
+        <Box width="full" height="full">
+          <div style={{ height: "120px" }}>
+            <Placeholder shape="rectangle" />
+          </div>
+        </Box>
+        <Rows spacing="0">
+          <TitlePlaceholder />
+          <TitlePlaceholder size="small" />
+        </Rows>
+      </Rows>
+    </Column>
+  </Columns>
+);