@canva/cli 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +22 -1
  2. package/cli.js +790 -629
  3. package/lib/cjs/index.cjs +1 -1
  4. package/lib/esm/index.mjs +1 -1
  5. package/package.json +12 -4
  6. package/templates/base/package.json +9 -7
  7. package/templates/base/styles/components.css +8 -8
  8. package/templates/dam/package.json +8 -8
  9. package/templates/data_connector/package.json +7 -7
  10. package/templates/data_connector/src/components/inputs/search_filter.tsx +2 -1
  11. package/templates/data_connector/src/context/app_context.tsx +3 -2
  12. package/templates/data_connector/src/routes/protected_route.tsx +2 -1
  13. package/templates/data_connector/styles/components.css +8 -8
  14. package/templates/gen_ai/package.json +7 -7
  15. package/templates/gen_ai/src/components/image_grid.tsx +3 -2
  16. package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx +2 -2
  17. package/templates/gen_ai/styles/components.css +8 -8
  18. package/templates/hello_world/package.json +7 -7
  19. package/templates/hello_world/src/tests/app.tests.tsx +2 -2
  20. package/templates/hello_world/styles/components.css +8 -8
package/templates/data_connector/styles/components.css CHANGED
@@ -3,13 +3,13 @@
3
3
  box-sizing: border-box;
4
4
  overflow-y: scroll;
5
5
  height: 100%;
6
- padding-top: var(--ui-kit-space-2);
7
- padding-right: var(--ui-kit-space-2);
8
- padding-bottom: var(--ui-kit-space-2);
6
+ padding-top: var(--ui-kit-space-200);
7
+ padding-right: var(--ui-kit-space-200);
8
+ padding-bottom: var(--ui-kit-space-200);
9
9
 
10
10
  /* for firefox */
11
11
  scrollbar-width: thin;
12
- scrollbar-color: var(--ui-kit-color-typography-quaternary) transparent;
12
+ scrollbar-color: var(--ui-kit-color-content-placeholder-fg) transparent;
13
13
  }
14
14
 
15
15
  .scrollContainer::-webkit-scrollbar {
@@ -21,13 +21,13 @@
21
21
  .scrollContainer::-webkit-scrollbar-track {
22
22
  background: transparent;
23
23
  width: var(--ui-kit-base-unit);
24
- margin-top: var(--ui-kit-space-1);
25
- margin-bottom: var(--ui-kit-space-1);
24
+ margin-top: var(--ui-kit-space-100);
25
+ margin-bottom: var(--ui-kit-space-100);
26
26
  }
27
27
 
28
28
  .scrollContainer::-webkit-scrollbar-thumb {
29
- border-radius: var(--ui-kit-border-radius);
30
- background: var(--ui-kit-color-typography-quaternary);
29
+ border-radius: var(--ui-kit-radius-element-standard);
30
+ background: var(--ui-kit-color-content-placeholder-fg);
31
31
  visibility: hidden;
32
32
  }
33
33
 
package/templates/gen_ai/package.json CHANGED
@@ -18,8 +18,8 @@
18
18
  "postinstall": "ts-node ./scripts/copy_env.ts"
19
19
  },
20
20
  "dependencies": {
21
- "@canva/app-i18n-kit": "^1.0.3",
22
- "@canva/app-ui-kit": "^4.10.0",
21
+ "@canva/app-i18n-kit": "^1.1.1",
22
+ "@canva/app-ui-kit": "^5.0.2",
23
23
  "@canva/asset": "^2.2.1",
24
24
  "@canva/design": "^2.7.2",
25
25
  "@canva/error": "^2.1.0",
@@ -29,10 +29,10 @@
29
29
  "cors": "2.8.5",
30
30
  "html-react-parser": "5.2.6",
31
31
  "obscenity": "0.4.4",
32
- "react": "18.3.1",
33
- "react-dom": "18.3.1",
32
+ "react": "19.1.1",
33
+ "react-dom": "19.1.1",
34
34
  "react-error-boundary": "6.0.0",
35
- "react-intl": "6.8.7",
35
+ "react-intl": "7.1.11",
36
36
  "react-router-dom": "7.8.2"
37
37
  },
38
38
  "devDependencies": {
@@ -54,8 +54,8 @@
54
54
  "@types/node-forge": "1.3.14",
55
55
  "@types/nodemon": "1.19.6",
56
56
  "@types/prompts": "2.4.9",
57
- "@types/react": "18.3.12",
58
- "@types/react-dom": "18.3.1",
57
+ "@types/react": "19.1.13",
58
+ "@types/react-dom": "19.1.9",
59
59
  "@types/webpack": "5.28.5",
60
60
  "@types/webpack-dev-server": "4.7.2",
61
61
  "@types/webpack-env": "1.18.8",
package/templates/gen_ai/src/components/image_grid.tsx CHANGED
@@ -2,6 +2,7 @@ import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
2
2
  import type { QueuedImage } from "@canva/asset";
3
3
  import { upload } from "@canva/asset";
4
4
  import { addElementAtPoint, ui } from "@canva/design";
5
+ import type { DragEvent } from "react";
5
6
  import { FormattedMessage, useIntl } from "react-intl";
6
7
  import type { ImageType } from "src/api";
7
8
  import { useAppContext } from "src/context";
@@ -28,7 +29,7 @@ export const ImageGrid = () => {
28
29
  const { generatedImages } = useAppContext();
29
30
 
30
31
  const onDragStart = async (
31
- event: React.DragEvent<HTMLElement>,
32
+ event: DragEvent<HTMLElement>,
32
33
  image: ImageType,
33
34
  ) => {
34
35
  const parentNode = event.currentTarget.parentElement;
@@ -87,7 +88,7 @@ export const ImageGrid = () => {
87
88
  alt={image.label}
88
89
  thumbnailHeight={THUMBNAIL_HEIGHT}
89
90
  borderRadius="standard"
90
- onDragStart={(event: React.DragEvent<HTMLElement>) =>
91
+ onDragStart={(event: DragEvent<HTMLElement>) =>
91
92
  onDragStart(event, image)
92
93
  }
93
94
  />
package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx CHANGED
@@ -4,10 +4,10 @@ import { TestAppUiProvider } from "@canva/app-ui-kit";
4
4
  import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
5
5
  import type { RenderResult } from "@testing-library/react";
6
6
  import { fireEvent, render } from "@testing-library/react";
7
- import React from "react";
7
+ import type { ReactNode } from "react";
8
8
  import { RemainingCredits } from "../remaining_credits";
9
9
 
10
- function renderInTestProvider(node: React.ReactNode): RenderResult {
10
+ function renderInTestProvider(node: ReactNode): RenderResult {
11
11
  return render(
12
12
  // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
13
13
  <TestAppI18nProvider>
package/templates/gen_ai/styles/components.css CHANGED
@@ -3,13 +3,13 @@
3
3
  box-sizing: border-box;
4
4
  overflow-y: scroll;
5
5
  height: 100%;
6
- padding-top: var(--ui-kit-space-2);
7
- padding-right: var(--ui-kit-space-2);
8
- padding-bottom: var(--ui-kit-space-2);
6
+ padding-top: var(--ui-kit-space-200);
7
+ padding-right: var(--ui-kit-space-200);
8
+ padding-bottom: var(--ui-kit-space-200);
9
9
 
10
10
  /* for firefox */
11
11
  scrollbar-width: thin;
12
- scrollbar-color: var(--ui-kit-color-typography-quaternary) transparent;
12
+ scrollbar-color: var(--ui-kit-color-content-placeholder-fg) transparent;
13
13
  }
14
14
 
15
15
  .scrollContainer::-webkit-scrollbar {
@@ -21,13 +21,13 @@
21
21
  .scrollContainer::-webkit-scrollbar-track {
22
22
  background: transparent;
23
23
  width: var(--ui-kit-base-unit);
24
- margin-top: var(--ui-kit-space-1);
25
- margin-bottom: var(--ui-kit-space-1);
24
+ margin-top: var(--ui-kit-space-100);
25
+ margin-bottom: var(--ui-kit-space-100);
26
26
  }
27
27
 
28
28
  .scrollContainer::-webkit-scrollbar-thumb {
29
- border-radius: var(--ui-kit-border-radius);
30
- background: var(--ui-kit-color-typography-quaternary);
29
+ border-radius: var(--ui-kit-radius-element-standard);
30
+ background: var(--ui-kit-color-content-placeholder-fg);
31
31
  visibility: hidden;
32
32
  }
33
33
 
package/templates/hello_world/package.json CHANGED
@@ -19,16 +19,16 @@
19
19
  "postinstall": "ts-node ./scripts/copy_env.ts"
20
20
  },
21
21
  "dependencies": {
22
- "@canva/app-i18n-kit": "^1.0.3",
23
- "@canva/app-ui-kit": "^4.10.0",
22
+ "@canva/app-i18n-kit": "^1.1.1",
23
+ "@canva/app-ui-kit": "^5.0.2",
24
24
  "@canva/asset": "^2.2.1",
25
25
  "@canva/design": "^2.7.2",
26
26
  "@canva/error": "^2.1.0",
27
27
  "@canva/platform": "^2.2.0",
28
28
  "@canva/user": "^2.1.1",
29
- "react": "18.3.1",
30
- "react-dom": "18.3.1",
31
- "react-intl": "6.8.7"
29
+ "react": "19.1.1",
30
+ "react-dom": "19.1.1",
31
+ "react-intl": "7.1.11"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@canva/app-eslint-plugin": "^1.0.0-beta.5",
@@ -47,8 +47,8 @@
47
47
  "@types/node-fetch": "2.6.13",
48
48
  "@types/node-forge": "1.3.14",
49
49
  "@types/nodemon": "1.19.6",
50
- "@types/react": "18.3.12",
51
- "@types/react-dom": "18.3.1",
50
+ "@types/react": "19.1.13",
51
+ "@types/react-dom": "19.1.9",
52
52
  "@types/webpack-env": "1.18.8",
53
53
  "chalk": "4.1.2",
54
54
  "cli-table3": "0.6.5",
package/templates/hello_world/src/tests/app.tests.tsx CHANGED
@@ -4,11 +4,11 @@ import { TestAppUiProvider } from "@canva/app-ui-kit";
4
4
  import { requestOpenExternalUrl } from "@canva/platform";
5
5
  import { fireEvent, render } from "@testing-library/react";
6
6
  import type { RenderResult } from "@testing-library/react";
7
- import React from "react";
7
+ import type { ReactNode } from "react";
8
8
  import { useAddElement } from "utils/use_add_element";
9
9
  import { App, DOCS_URL } from "../app";
10
10
 
11
- function renderInTestProvider(node: React.ReactNode): RenderResult {
11
+ function renderInTestProvider(node: ReactNode): RenderResult {
12
12
  return render(
13
13
  // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
14
14
  <TestAppI18nProvider>
package/templates/hello_world/styles/components.css CHANGED
@@ -3,13 +3,13 @@
3
3
  box-sizing: border-box;
4
4
  overflow-y: scroll;
5
5
  height: 100%;
6
- padding-top: var(--ui-kit-space-2);
7
- padding-right: var(--ui-kit-space-2);
8
- padding-bottom: var(--ui-kit-space-2);
6
+ padding-top: var(--ui-kit-space-200);
7
+ padding-right: var(--ui-kit-space-200);
8
+ padding-bottom: var(--ui-kit-space-200);
9
9
 
10
10
  /* for firefox */
11
11
  scrollbar-width: thin;
12
- scrollbar-color: var(--ui-kit-color-typography-quaternary) transparent;
12
+ scrollbar-color: var(--ui-kit-color-content-placeholder-fg) transparent;
13
13
  }
14
14
 
15
15
  .scrollContainer::-webkit-scrollbar {
@@ -21,13 +21,13 @@
21
21
  .scrollContainer::-webkit-scrollbar-track {
22
22
  background: transparent;
23
23
  width: var(--ui-kit-base-unit);
24
- margin-top: var(--ui-kit-space-1);
25
- margin-bottom: var(--ui-kit-space-1);
24
+ margin-top: var(--ui-kit-space-100);
25
+ margin-bottom: var(--ui-kit-space-100);
26
26
  }
27
27
 
28
28
  .scrollContainer::-webkit-scrollbar-thumb {
29
- border-radius: var(--ui-kit-border-radius);
30
- background: var(--ui-kit-color-typography-quaternary);
29
+ border-radius: var(--ui-kit-radius-element-standard);
30
+ background: var(--ui-kit-color-content-placeholder-fg);
31
31
  visibility: hidden;
32
32
  }
33
33