@canva/cli 0.0.1-beta.3 → 0.0.1-beta.5

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 (31) hide show
  1. package/README.md +180 -110
  2. package/cli.js +422 -358
  3. package/package.json +1 -1
  4. package/templates/base/eslint.config.mjs +0 -2
  5. package/templates/base/package.json +22 -19
  6. package/templates/common/.gitignore.template +5 -6
  7. package/templates/common/.nvmrc +1 -0
  8. package/templates/common/.prettierrc +21 -0
  9. package/templates/common/.vscode/extensions.json +6 -0
  10. package/templates/common/README.md +4 -7
  11. package/templates/common/conf/eslint-general.mjs +26 -0
  12. package/templates/common/conf/eslint-i18n.mjs +18 -3
  13. package/templates/dam/package.json +23 -23
  14. package/templates/gen_ai/README.md +1 -40
  15. package/templates/gen_ai/backend/routers/image.ts +3 -3
  16. package/templates/gen_ai/backend/server.ts +0 -7
  17. package/templates/gen_ai/eslint.config.mjs +0 -2
  18. package/templates/gen_ai/package.json +24 -24
  19. package/templates/gen_ai/src/api/api.ts +24 -79
  20. package/templates/gen_ai/src/components/footer.messages.ts +0 -5
  21. package/templates/gen_ai/src/components/footer.tsx +7 -25
  22. package/templates/gen_ai/src/components/index.ts +0 -1
  23. package/templates/gen_ai/src/components/loading_results.tsx +4 -8
  24. package/templates/gen_ai/src/context/app_context.tsx +5 -33
  25. package/templates/gen_ai/src/context/context.messages.ts +1 -12
  26. package/templates/hello_world/eslint.config.mjs +0 -2
  27. package/templates/hello_world/package.json +18 -18
  28. package/templates/gen_ai/backend/routers/oauth.ts +0 -393
  29. package/templates/gen_ai/src/components/logged_in_status.tsx +0 -44
  30. package/templates/gen_ai/src/services/auth.tsx +0 -26
  31. package/templates/gen_ai/src/services/index.ts +0 -1
package/README.md CHANGED
@@ -7,200 +7,270 @@ CLI for creating and managing Canva Apps.
7
7
  ## Table of contents
8
8
 
9
9
  - [Introduction](#introduction)
10
- - [Features](#features)
11
- - [Usage](#usage)
10
+ - [Requirements](#requirements)
11
+ - [Quickstart](#quickstart)
12
+ - [Use the Canva CLI](#use-the-canva-cli)
13
+ - [Step 1: Install and log in](#step-1-install-and-log-in)
14
+ - [Step 2: Create your app](#step-2-create-your-app)
15
+ - [Step 3: Preview your app](#step-3-preview-your-app)
16
+ - [Log out, auth token storage, and removal](#token-storage-and-removal)
12
17
  - [CLI reference](#cli-reference)
13
18
  - [Flags](#flags)
14
19
  - [Commands](#commands)
15
20
  - [Next steps](#next-steps)
16
21
  - [Limitations](#limitations)
17
- - [Updating](#updating)
18
- - [Contributing](#contributing)
22
+ - [Updates](#updating)
23
+ - [Contributions](#contributing)
19
24
  - [License](#license)
20
25
 
21
26
  ## Introduction
22
27
 
23
- `@canva/cli` is a command line tool designed for creating and managing Canva Apps. To learn more about app development, visit [the official documentation](https://www.canva.dev/docs/apps).
28
+ `@canva/cli` is a command line tool designed for creating and managing Canva Apps. Use `@canva/cli` to get started creating and testing your app. The Canva CLI allows you to create apps from the command line, and to use Canva's recommended development tools and templates.
24
29
 
25
- ## Features
30
+ To learn more about app development, visit [the official documentation](https://www.canva.dev/docs/apps).
26
31
 
27
- - Log in to your Canva account.
28
- - Create and manage apps directly from the command line.
29
- - Utilize Canva's recommended development tools and templates.
32
+ ## Requirements
30
33
 
31
- ## Prerequisites
34
+ Before using the CLI, make sure that you have the following:
32
35
 
33
- Before using the CLI, ensure that you have the following installed:
36
+ - Node.js `v18.20.4` or `v20.17.0`.
37
+ - npm `v9` or `v10`.
38
+ - A [Canva account](https://www.canva.com/developers).
34
39
 
35
- - Node.js `v18.20.4` or `v20.17.0`
36
- - npm `v9` or `v10`
40
+ **Note**: If you are using a version manager such as nvm, run the `nvm install 20.17.0` command to make sure you have the correct Node.js version.
37
41
 
38
- ## Usage
42
+ ## Quickstart
39
43
 
40
- To start using the CLI, first install it globally:
44
+ The following commands create a new Canva app using the Canva CLI.
41
45
 
42
- ```bash
43
- npm install -g @canva/cli
46
+ ```shell
47
+ npm install -g @canva/cli@latest
48
+ canva login
49
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
50
+ cd my-new-app
51
+ npm start
44
52
  ```
45
53
 
46
- After installation, you can use the CLI by running:
54
+ ## Use the Canva CLI
47
55
 
48
- ```bash
49
- canva <command>
50
- ```
56
+ ### Step 1: Install and log in
51
57
 
52
- ## CLI Reference
58
+ Installing the Canva CLI allows you to create new apps from the command line.
53
59
 
54
- ### Flags
60
+ To get started:
55
61
 
56
- Top-level flags applicable across commands:
62
+ 1. Install the Canva CLI globally.
57
63
 
58
- - `--help`: Display help information about commands and flags.
59
- - `--lite`: Enable a simplified CLI interface for enhanced accessibility.
60
- - `--version`: Show the version number of the CLI.
64
+ ```shell
65
+ npm install -g @canva/cli@latest
66
+ ```
61
67
 
62
- ### Commands
68
+ 2. Log in to the Canva CLI. The Canva CLI then opens an access request page in your browser.
63
69
 
64
- #### welcome
70
+ ```shell
71
+ canva login
72
+ ```
65
73
 
66
- Display the welcome page and general information.
74
+ 3. In your browser, click **Allow** to grant the Canva CLI access to create and edit apps on your behalf. When you grant access, the Canva CLI generates an auth token and stores it locally. For more information on the auth token, read the following section on [auth token storage and removal](#log-out-auth-token-storage-and-removal).
75
+ 4. Copy the confirmation code shown in your browser, and paste it into the Canva CLI input.
67
76
 
68
- - **Usage**:
77
+ ### Step 2: Create your app
69
78
 
70
- ```bash
71
- canva welcome
72
- ```
79
+ After you log in to the Canva CLI and authorize it, you can create your app.
73
80
 
74
- #### tip
81
+ To create a new app:
75
82
 
76
- Get a random development tip for working with the Apps SDK.
83
+ 1. Run the `canva apps create` command. The flags in the following code snippet are optional, and you can instead configure these settings during the apps creation process. See the [CLI Reference](#cli-reference) for more information on each flag.
77
84
 
78
- - **Usage**:
85
+ ```shell
86
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
87
+ ```
79
88
 
80
- ```bash
81
- canva tip
82
- ```
89
+ **Note**: You can't change the distribution type after creating an app.
83
90
 
84
- - **Aliases**: `tips`
91
+ ### Step 3: Preview your app
85
92
 
86
- #### login
93
+ When your new app is ready, the Canva CLI automatically opens the [Developer Portal](https://www.canva.com/developers/apps) to your new app's Configuration page in your browser. You can then continue to preview and manage your new app.
87
94
 
88
- Log in to the Canva CLI.
95
+ To preview your app:
89
96
 
90
- - **Usage**:
97
+ 1. Change into your new app's folder.
91
98
 
92
- ```bash
93
- canva login
94
- ```
99
+ ```shell
100
+ cd my-new-app
101
+ ```
95
102
 
96
- #### apps
103
+ 2. Run the following command to start your app.
97
104
 
98
- Manage your Canva apps.
105
+ ```shell
106
+ npm start
107
+ ```
99
108
 
100
- - **Usage**:
109
+ 3. In the Developer Portal, click **Preview** to open the Canva Editor preview.
110
+ 4. If this the first time previewing your app, click **Open** to preview your new app.
101
111
 
102
- ```bash
103
- canva apps
104
- ```
112
+ ## Log out, auth token storage, and removal
113
+
114
+ When you log in to the Canva CLI using the `canva login` command, and then grant the Canva CLI access to manage apps in your Canva account, an auth token is encrypted and stored locally on your machine. The token provides authentication for future requests so you don't need to grant the Canva CLI access each time it sends a request.
105
115
 
106
- - **Sub-Commands**:
116
+ When you log out of the Canva CLI with the `canva logout` command, the auth token is revoked, and deleted.
107
117
 
108
- - `create [name]`: Create a new Canva app.
118
+ ### Token Location
109
119
 
110
- - **Usage**:
120
+ The auth token is located in your home directory under the `.canva-cli` folder.
111
121
 
112
- ```bash
113
- canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
114
- ```
122
+ ### Removing the Token
115
123
 
116
- - **Arguments**:
117
- - `[name]`: Sets the app's name. Provide the desired name of the app when using this command.
118
- - **Flags**:
124
+ To delete the token, there are two options. However only the `canva logout` command revokes and deletes the token. If there's a copy of the token, it's possible to reconnect the Canva CLI to your account's apps using the token.
119
125
 
120
- - `--template`: Specifies the starting template for the app.
126
+ #### Log out
121
127
 
122
- Available templates:
128
+ 1. Use the `canva logout` command to revoke access and delete the stored token.
123
129
 
124
- - `"hello_world"`: Basic starting point.
125
- - `"dam"`: Digital asset management integration.
126
- - `"gen_ai"`: Generative AI app creation.
130
+ ```shell
131
+ canva logout
132
+ ```
127
133
 
128
- - `--distribution`: Sets the app's distribution type.
134
+ #### Delete the file manually
129
135
 
130
- Options:
136
+ 1. Locate the `credentials` file, which is stored in the following locations:
131
137
 
132
- - `"public"`: Available to all Canva users, subject to Canva review.
133
- - `"private"`: Only available to your team, requires team admin approval.
138
+ - **macOS and Linux**: The token is stored in `~/.canva-cli/credentials`.
139
+ - **Windows**: The token is stored in `%USERPROFILE%\.canva-cli\credentials`.
134
140
 
135
- > [!Note]
136
- > This setting cannot be changed after the app is created.
141
+ 2. Delete the file.
137
142
 
138
- - `--git`: Initializes a Git repository in the project directory.
143
+ ## CLI Reference
139
144
 
140
- - `--installDependencies`: Automatically installs necessary npm dependencies.
145
+ After installation, you can use the Canva CLI by running:
141
146
 
142
- - `list`: List all Canva apps.
147
+ ```shell
148
+ canva <command-name>
149
+ ```
143
150
 
144
- - **Usage**:
151
+ ### Flags
152
+
153
+ Top-level flags applicable to commands:
145
154
 
146
- ```bash
147
- canva apps list
148
- ```
155
+ - `--help`: Show help information about commands and flags.
156
+ - `--lite`: Enable a simplified CLI interface for enhanced accessibility.
157
+ - `--version`: Show the CLI version number.
158
+
159
+ ### Commands
160
+
161
+ #### welcome
162
+
163
+ Show the welcome page and general information.
164
+
165
+ ```shell
166
+ canva welcome
167
+ ```
168
+
169
+ #### tip
170
+
171
+ Print a random development tip for working with the Apps SDK.
172
+
173
+ ```shell
174
+ canva tip
175
+ ```
176
+
177
+ - **Aliases**:
178
+ - `tips`: Also prints a random development tip.
179
+
180
+ #### login
181
+
182
+ Log in to the Canva CLI.
183
+
184
+ ```shell
185
+ canva login
186
+ ```
149
187
 
150
188
  #### logout
151
189
 
152
- Log out and revoke access from the CLI.
190
+ Log out of the Canva CLI, and delete the saved auth token:
153
191
 
154
- - **Usage**:
192
+ ```shell
193
+ canva logout
194
+ ```
155
195
 
156
- ```bash
157
- canva logout
196
+ #### apps
197
+
198
+ Manage your Canva apps.
199
+
200
+ ```shell
201
+ canva apps
202
+ ```
203
+
204
+ #### apps sub-commands
205
+
206
+ - `create "app-name"`: Create a new Canva app.
207
+
208
+ ```shell
209
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
158
210
  ```
159
211
 
160
- ## Next Steps
212
+ - **Arguments**:
213
+ - `--name`: Sets the app's name. Provide the name you want for the app.
214
+ - **Flags**:
161
215
 
162
- - [Preview your app in the Canva editor](https://www.canva.dev/docs/apps/previewing-apps/)
163
- - [Integrate your app with Canva using the Apps SDK](https://www.canva.dev/docs/apps/integrating-canva/)
216
+ - `--template`: Specifies the starting template for the app.
164
217
 
165
- ## Limitations
218
+ Available templates:
166
219
 
167
- Once an app is created, it must be managed through Canva's [Developer Portal](https://www.canva.com/developers/apps) and cannot be fully managed via the CLI.
220
+ - `"hello_world"`: Basic starting point.
221
+ - `"dam"`: Digital asset management integration.
222
+ - `"gen_ai"`: Generative AI app creation.
168
223
 
169
- ## Updating
224
+ - `--distribution`: Sets the app's distribution type.
170
225
 
171
- To update the CLI to the latest version, run:
226
+ Available types:
172
227
 
173
- ```bash
174
- npm update -g @canva/cli
175
- ```
228
+ - `"public"`: Available to all Canva users, subject to Canva review.
229
+ - `"private"`: Only available to your team, and requires team admin approval.
176
230
 
177
- ## Token Storage and Removal
231
+ **Note**: You can't change the distribution setting after creating a new app with the `canva apps create` command.
178
232
 
179
- When you log in using the `canva login` command, the Auth token is encrypted and stored locally on your machine. This token is used to authenticate future requests made by the CLI, so you don’t have to log in repeatedly.
233
+ - `--git`: Initializes a Git repository in the project directory.
180
234
 
181
- ### Token Location
235
+ - `--installDependencies`: Automatically installs necessary npm dependencies during the app creation process.
182
236
 
183
- The token is stored in a credentials file located in your home directory under the `.canva-cli` folder:
237
+ - `--offline`: Scaffold the app locally without also creating an app in the Developer Portal.
184
238
 
185
- ### Removing the Token
239
+ - `list`: List all Canva apps.
240
+
241
+ ```shell
242
+ canva apps list
243
+ ```
186
244
 
187
- To remove the token and log out of the CLI, you can either:
245
+ #### logout
188
246
 
189
- 1. Use the `canva logout` command to revoke access and delete the stored token:
247
+ Log out and revoke Canva CLI access.
190
248
 
191
- ```bash
192
- canva logout
193
- ```
249
+ ```shell
250
+ canva logout
251
+ ```
252
+
253
+ ## Next Steps
254
+
255
+ - [Preview your app in the Canva editor](https://www.canva.dev/docs/apps/previewing-apps/)
256
+ - [Integrate your app with Canva using the Apps SDK](https://www.canva.dev/docs/apps/integrating-canva/)
257
+
258
+ ## Limitations
259
+
260
+ You must manage your new app created through the Canva CLI through the [Developer Portal](https://www.canva.com/developers/apps). You can't manage apps completely through the Canva CLI.
194
261
 
195
- 2. Manually delete the credentials file:
262
+ ## Updates
196
263
 
197
- - **macOS/Linux**: The token is stored in `~/.canva-cli/credentials`.
198
- - **Windows**: The token is stored in `%USERPROFILE%\.canva-cli\credentials`.
264
+ To update the CLI to the latest version, run:
265
+
266
+ ```shell
267
+ npm update -g @canva/cli@latest
268
+ ```
199
269
 
200
- ## Contributing
270
+ ## Contributions
201
271
 
202
- We're in active development and currently do not accept third-party contributions. Please submit any feature requests through the [Canva Developers Community](https://community.canva.dev/).
272
+ Currently the Canva CLI doesn't accept third-party contributions. Please submit any feature requests through the [Canva Developers Community](https://community.canva.dev/).
203
273
 
204
274
  ## License
205
275
 
206
- Refer to the `LICENSE.md` file for licensing details.
276
+ Refer to the `LICENSE.md` file for more information.