@canva/create-app
Version:
A command line tool for creating Canva Apps.
218 lines (216 loc) • 6.83 kB
text/typescript
import type { Config } from "@canva/app-components";
import { useIntl } from "react-intl";
type ContainerTypes = "folder";
export const useConfig = (): Config<ContainerTypes> => {
const intl = useIntl();
return {
serviceName: intl.formatMessage({
defaultMessage: "Example App",
description:
"Name of the service where the app will pull digital assets from",
}),
search: {
enabled: true,
filterFormConfig: {
containerTypes: ["folder"],
filters: [
{
filterType: "CHECKBOX",
label: intl.formatMessage({
defaultMessage: "File Type",
description: "Label of filters for file type",
}),
key: "fileType",
options: [
{ value: "mp4", label: "MP4" },
{ value: "png", label: "PNG" },
{ value: "jpeg", label: "JPEG" },
],
allowCustomValue: true,
},
{
filterType: "RADIO",
label: intl.formatMessage({
defaultMessage: "Size",
description: "Label of filters for asset size",
}),
key: "size",
options: [
{
label: intl.formatMessage({
defaultMessage: "Large (800+ px)",
description: "One of the filter options for asset size",
}),
value: "large",
},
{
label: intl.formatMessage({
defaultMessage: "Medium (200-799px)",
description: "One of the filter options for asset size",
}),
value: "medium",
},
],
allowCustomValue: true,
customValueInputType: "SIZE_RANGE",
},
{
filterType: "RADIO",
label: intl.formatMessage({
defaultMessage: "Update Date",
description: "Label of the filters for asset's update date",
}),
key: "updateDate",
options: [
{
value: ">now-30m",
label: intl.formatMessage({
defaultMessage: "Last 30 Minutes",
description:
"One of the filter options for asset update date",
}),
},
{
value: ">now-7d",
label: intl.formatMessage({
defaultMessage: "Last 7 days",
description:
"One of the filter options for asset update date",
}),
},
],
allowCustomValue: true,
customValueInputType: "DATE_RANGE",
},
{
filterType: "RADIO",
label: intl.formatMessage({
defaultMessage: "Design Status",
description: "Label of the filters for asset's design status",
}),
key: "designStatus",
options: [
{
value: "approved",
label: intl.formatMessage({
defaultMessage: "Approved",
description:
"One of the filter options for asset design status",
}),
},
{
value: "rejected",
label: intl.formatMessage({
defaultMessage: "Rejected",
description:
"One of the filter options for asset design status",
}),
},
{
value: "draft",
label: intl.formatMessage({
defaultMessage: "Draft",
description:
"One of the filter options for asset design status",
}),
},
],
allowCustomValue: true,
customValueInputType: "PLAIN_TEXT",
},
],
},
},
containerTypes: [
{
value: "folder",
label: intl.formatMessage({
defaultMessage: "Folders",
description: "Name of the asset container type",
}),
listingSurfaces: [
{ surface: "HOMEPAGE" },
{
surface: "CONTAINER",
parentContainerTypes: ["folder"],
},
{ surface: "SEARCH" },
],
searchInsideContainer: {
enabled: true,
placeholder: intl.formatMessage({
defaultMessage: "Search for media inside this folder",
description: "Placeholder of a search input box",
}),
},
},
],
sortOptions: [
{
value: "created_at DESC",
label: intl.formatMessage({
defaultMessage: "Creation date (newest)",
description: "One of the sort options",
}),
},
{
value: "created_at ASC",
label: intl.formatMessage({
defaultMessage: "Creation date (oldest)",
description: "One of the sort options",
}),
},
{
value: "updated_at DESC",
label: intl.formatMessage({
defaultMessage: "Updated (newest)",
description: "One of the sort options",
}),
},
{
value: "updated_at ASC",
label: intl.formatMessage({
defaultMessage: "Updated (oldest)",
description: "One of the sort options",
}),
},
{
value: "name ASC",
label: intl.formatMessage({
defaultMessage: "Name (A-Z)",
description: "One of the sort options",
}),
},
{
value: "name DESC",
label: intl.formatMessage({
defaultMessage: "Name (Z-A)",
description: "One of the sort options",
}),
},
],
layouts: ["MASONRY", "LIST"],
resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
moreInfoMessage: intl.formatMessage({
defaultMessage:
"At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
description: "Helper text to explain why some assets are not visible",
}),
// TODO remove `export` if your app does not support exporting the Canva design into an external platform
export: {
enabled: true,
// TODO provide a container type that user can choose to save into, or remove this field if user doesn't need to choose a container
containerTypes: ["folder"],
// TODO remove file types that are not supported by your platform
acceptedFileTypes: [
"png",
"pdf_standard",
"jpg",
"gif",
"svg",
"video",
"pptx",
],
},
};
};