@canva/cli 1.19.0 → 1.20.0

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

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

package/templates/mls/src/data.ts

@@ -1,359 +0,0 @@
-import type { Agent, Office, Property } from "./real_estate.type";
-// Example Real Estate data
-
-// TODO: replace these with assets from your CDN
-const RealEstateAgentThumbnail1 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444454/real-estate-agent-1_zhrimx.png";
-const RealEstateAgentThumbnail2 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444454/real-estate-agent-2_fcculq.png";
-
-const RealEstateListing1 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444456/real-estate-listing-1_inyeny.png";
-const RealEstateListing2 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444455/real-estate-listing-2_zqaa97.png";
-const RealEstateListing3 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444456/real-estate-listing-3_arbr7e.png";
-const RealEstateListing4 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444456/real-estate-listing-4_b9upex.png";
-const RealEstateListing5 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444463/real-estate-listing-5_isg9x1.png";
-const RealEstateListing6 =
-  "https://res.cloudinary.com/dxwoiemnu/image/upload/v1742444457/real-estate-listing-6_k7divw.png";
-
-const RealEstateAvatar = "https://i.pravatar.cc/300?img=33";
-
-export const offices: Office[] = [
-  { id: "office1", name: "Murray Street" },
-  { id: "office2", name: "Jermaine Street" },
-  { id: "office3", name: "Brett Street" },
-  { id: "empty-office", name: "Empty Office" },
-  { id: "error-office", name: "Error Office" },
-  { id: "agents-only-office", name: "Agents Only Office" },
-  { id: "listings-only-office", name: "Listings Only Office" },
-];
-
-const getRandomAgent = () => {
-  const randomIndex = Math.floor(Math.random() * agents.length);
-  return agents[randomIndex];
-};
-
-export const agents: Agent[] = [
-  {
-    id: "agent1",
-    name: "Alice",
-    officeId: "office1",
-    phoneNumber: "+61 2 1234 5678",
-    roleTitle: "Senior Property Consultant",
-    headshots: [
-      {
-        url: RealEstateAgentThumbnail1,
-        width: 400,
-        height: 400,
-      },
-    ],
-  },
-  {
-    id: "agent2",
-    name: "Bob",
-    officeId: "office2",
-    phoneNumber: "+61 2 8765 4321",
-    roleTitle: "Property Manager",
-    headshots: [
-      {
-        url: RealEstateAgentThumbnail2,
-        width: 400,
-        height: 400,
-      },
-    ],
-  },
-  {
-    id: "agent3",
-    name: "Carol",
-    officeId: "office3",
-    phoneNumber: "+61 2 2468 1357",
-    roleTitle: "Real Estate Agent",
-    headshots: [
-      {
-        url: RealEstateAgentThumbnail1,
-        width: 400,
-        height: 400,
-      },
-    ],
-  },
-];
-
-export const listings: Property[] = [
-  {
-    id: "listing1",
-    agent: getRandomAgent(),
-    url: "/listings/123-ocean-view-drive",
-    title: "Stunning Beachfront Property with Panoramic Views",
-    name: "Luxury Ocean View House",
-    description: "Beautiful house with stunning ocean views in Beachside",
-    address: "123 Ocean View Drive",
-    suburb: "Beachside",
-    price: "$2,450,000",
-    listingType: "House",
-    thumbnail: {
-      url: RealEstateListing1,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing1,
-        alt: "Front view of the house",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing2,
-        alt: "Backyard view",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing3,
-        alt: "Kitchen interior",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing4,
-        alt: "Living room",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-  {
-    id: "listing2",
-    agent: getRandomAgent(),
-    url: "/listings/45-mountain-road",
-    title: "Spacious Family Home with Mountain Vistas",
-    name: "Mountain View Family Home",
-    description: "Spacious family home with mountain views in Highland Park",
-    address: "45 Mountain Road",
-    suburb: "Highland Park",
-    price: "$1,850,000",
-    listingType: "House",
-    thumbnail: {
-      url: RealEstateListing2,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing2,
-        alt: "Front view of the house",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing3,
-        alt: "Mountain view from balcony",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing4,
-        alt: "Family room",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing5,
-        alt: "Master bedroom",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-  {
-    id: "listing3",
-    agent: getRandomAgent(),
-    url: "/listings/789-city-center-ave",
-    title: "Modern Apartment in Prime Downtown Location",
-    name: "Modern Downtown Apartment",
-    description: "Contemporary apartment in the heart of downtown",
-    address: "789 City Center Ave",
-    suburb: "Downtown",
-    price: "$950,000",
-    listingType: "Apartment",
-    thumbnail: {
-      url: RealEstateListing3,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing3,
-        alt: "Front view of the apartment",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing4,
-        alt: "City view from balcony",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing5,
-        alt: "Modern kitchen",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing6,
-        alt: "Open plan living area",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-  {
-    id: "listing4",
-    agent: getRandomAgent(),
-    url: "/listings/321-riverside-lane",
-    title: "Elegant Townhouse with River Views",
-    name: "Riverside Townhouse",
-    description: "Elegant townhouse with river views in Waterfront",
-    address: "321 Riverside Lane",
-    suburb: "Waterfront",
-    price: "$1,650,000",
-    listingType: "Townhouse",
-    thumbnail: {
-      url: RealEstateListing4,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing4,
-        alt: "Front view of the townhouse",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing5,
-        alt: "River view from deck",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing6,
-        alt: "Gourmet kitchen",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing1,
-        alt: "Master suite",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-  {
-    id: "listing5",
-    agent: getRandomAgent(),
-    url: "/listings/567-park-view-court",
-    title: "Luxury Villa Overlooking City Park",
-    name: "Park View Villa",
-    description:
-      "Luxurious villa overlooking the city park with modern amenities",
-    address: "567 Park View Court",
-    suburb: "Parkview",
-    price: "$2,750,000",
-    listingType: "House",
-    thumbnail: {
-      url: RealEstateListing5,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing5,
-        alt: "Front view of the villa",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing6,
-        alt: "Park view from terrace",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing1,
-        alt: "Infinity pool",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing2,
-        alt: "Entertainment area",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-  {
-    id: "listing6",
-    agent: getRandomAgent(),
-    url: "/listings/890-garden-heights",
-    title: "Grand Estate with Manicured Gardens",
-    name: "Garden Heights Estate",
-    description: "Sprawling estate with manicured gardens and pool",
-    address: "890 Garden Heights Road",
-    suburb: "Garden Heights",
-    price: "$3,250,000",
-    listingType: "House",
-    thumbnail: {
-      url: RealEstateListing6,
-      width: 800,
-      height: 600,
-    },
-    listing_images: [
-      {
-        url: RealEstateListing6,
-        alt: "Front view of the estate",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing1,
-        alt: "Manicured gardens",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing2,
-        alt: "Swimming pool",
-        width: 1920,
-        height: 1080,
-      },
-      {
-        url: RealEstateListing3,
-        alt: "Grand entrance",
-        width: 1920,
-        height: 1080,
-      },
-    ],
-  },
-];
-
-export const mockUserData = {
-  userName: "Alex Chen",
-  userEmail: "alex.chen@example.com",
-  userAvatarUrl: RealEstateAvatar,
-};
-
-export const mockAgentData = {
-  agentName: "${agentName}",
-  roleTitle: "${agentRoleTitle}",
-  phoneNumber: "${agentPhoneNumber}",
-  emailAddress: "${agentEmailAddress}",
-  branch: "${agentBranch}",
-};

package/templates/mls/src/index.tsx

@@ -1,4 +0,0 @@
-import { prepareDesignEditor } from "@canva/intents/design";
-import designEditor from "./intents/design_editor";
-
-prepareDesignEditor(designEditor);

package/templates/mls/src/intents/design_editor/app.tsx

@@ -1,44 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React from "react";
-import {
-  MemoryRouter as Router,
-  Navigate,
-  Route,
-  Routes,
-} from "react-router-dom";
-import * as styles from "styles/components.css";
-import { AgentDetailsPage } from "../../pages/agent_details_page/agent_details_page";
-import { ListPage } from "../../pages/list_page/list_page";
-import { ListingDetailsPage as ListingDetailsPage } from "../../pages/listing_details_page/listing_details_page";
-import { LoadingPage } from "../../pages/loading_page/loading_page";
-import { OfficeSelectionPage } from "../../pages/office_selection_page/office_selection_page";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      staleTime: 1000 * 60 * 1, // 1 minute
-      retryOnMount: false,
-      retry: false,
-    },
-  },
-});
-
-export function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Router>
-        <div className={styles.scrollContainer}>
-          <Routes>
-            <Route path="/" element={<Navigate to="/entry" replace />} />
-            <Route path="/entry" element={<OfficeSelectionPage />} />
-            <Route path="/loading" element={<LoadingPage />} />
-            <Route path="/list/:tab?" element={<ListPage />} />
-            <Route path="/details/listing" element={<ListingDetailsPage />} />
-            <Route path="/details/agent" element={<AgentDetailsPage />} />
-          </Routes>
-        </div>
-      </Router>
-    </QueryClientProvider>
-  );
-}

package/templates/mls/src/intents/design_editor/index.tsx

@@ -1,25 +0,0 @@
-import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import type { DesignEditorIntent } from "@canva/intents/design";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-
-async function render() {
-  const root = createRoot(document.getElementById("root") as Element);
-
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <App />
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
-}
-
-const designEditor: DesignEditorIntent = { render };
-export default designEditor;
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}

package/templates/mls/src/pages/agent_details_page/agent_details_page.tsx

@@ -1,175 +0,0 @@
-import {
-  ArrowLeftIcon,
-  Box,
-  Button,
-  Column,
-  Columns,
-  ImageCard,
-  Rows,
-  Text,
-  TypographyCard,
-} from "@canva/app-ui-kit";
-import { useIntl } from "react-intl";
-import { useLocation, useNavigate } from "react-router-dom";
-import type { Agent } from "../../real_estate.type";
-import { useAddElement } from "../../util/use_add_element";
-import { useDragElement } from "../../util/use_drag_element";
-
-export const AgentDetailsPage = () => {
-  const navigate = useNavigate();
-  const agent = (useLocation().state as { agent: Agent })?.agent;
-  const intl = useIntl();
-
-  const { addText, addImage } = useAddElement();
-
-  const { dragText, dragImage } = useDragElement();
-
-  if (!agent) {
-    navigate(-1);
-  }
-
-  return (
-    <Box paddingY="2u" height="full">
-      <Rows spacing="2u">
-        <Columns spacing="1u" alignY="center">
-          <Column width="content">
-            <Button
-              icon={ArrowLeftIcon}
-              size="small"
-              type="button"
-              variant="tertiary"
-              onClick={() => navigate(-1)}
-            />
-          </Column>
-          <Column>
-            <Text variant="bold">
-              {intl.formatMessage({
-                defaultMessage: "Agent Details",
-                description: "Page title for agent details page",
-              })}
-            </Text>
-          </Column>
-        </Columns>
-
-        <Rows spacing="2u">
-          {agent.headshots && (
-            <Box>
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Headshots",
-                    description: "Label for agent headshots section",
-                  })}
-                </Text>
-                <Columns spacing="2u" alignY="stretch">
-                  {agent.headshots.map((headshot, index) => (
-                    <Column key={index} width="1/2">
-                      <ImageCard
-                        selectable
-                        thumbnailUrl={headshot.url}
-                        alt={intl.formatMessage({
-                          defaultMessage: "Agent photo",
-                          description: "Alt text for agent photo",
-                        })}
-                        thumbnailHeight={150}
-                        onClick={async () => {
-                          await addImage(
-                            headshot.url,
-                            intl.formatMessage({
-                              defaultMessage: "Agent photo",
-                              description: "Alt text for agent photo",
-                            }),
-                          );
-                        }}
-                        onDragStart={(e) => {
-                          dragImage(
-                            e,
-                            headshot.url,
-                            intl.formatMessage({
-                              defaultMessage: "Agent photo",
-                              description: "Alt text for agent photo",
-                            }),
-                            headshot.width,
-                            headshot.height,
-                          );
-                        }}
-                      />
-                    </Column>
-                  ))}
-                </Columns>
-              </Rows>
-            </Box>
-          )}
-
-          <Rows spacing="2u">
-            <Box>
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Name",
-                    description: "Label for agent name field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add agent name to design",
-                    description:
-                      "Accessibility label for adding agent name to design",
-                  })}
-                  onClick={() => addText(agent.name)}
-                  onDragStart={(e) => dragText(e, agent.name)}
-                >
-                  <Text>{agent.name}</Text>
-                </TypographyCard>
-              </Rows>
-            </Box>
-
-            <Box>
-              <Rows spacing="1u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Title",
-                    description: "Label for agent role title field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add agent title to design",
-                    description:
-                      "Accessibility label for adding agent title to design",
-                  })}
-                  onClick={() => addText(agent.roleTitle || "")}
-                  onDragStart={(e) => dragText(e, agent.roleTitle || "")}
-                >
-                  <Text>{agent.roleTitle}</Text>
-                </TypographyCard>
-              </Rows>
-            </Box>
-
-            <Box>
-              <Rows spacing="0.5u">
-                <Text variant="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "Phone number",
-                    description: "Label for agent phone number field",
-                  })}
-                </Text>
-                <TypographyCard
-                  ariaLabel={intl.formatMessage({
-                    defaultMessage: "Add agent phone to design",
-                    description:
-                      "Accessibility label for adding agent phone to design",
-                  })}
-                  onClick={() => addText(agent.phoneNumber || "")}
-                  onDragStart={(e) => dragText(e, agent.phoneNumber || "")}
-                >
-                  <Text>{agent.phoneNumber}</Text>
-                </TypographyCard>
-              </Rows>
-            </Box>
-          </Rows>
-        </Rows>
-      </Rows>
-    </Box>
-  );
-};