feat(PR-40): update theme methods (#104)

Update `Typeform.Theme` type to include new types from docs:
https://www.typeform.com/developers/create/reference/create-theme/

Fix `theme.create` and `theme.update` methods to send payload to API.

Update the bin to load payload from a file: `params.json` as JSON or
`params.js` as JavaScript object. It is easier to pass large payloads
like this compared to passing it via command line.

.eslintignore

@@ -1,3 +1,5 @@
 # output folder
 dist/
 rollup.config.js
+params.js
+params.json

.gitignore

@@ -4,4 +4,6 @@ lib
 .npmrc
 yarn-error.log
 .DS_STORE
-.idea/
+.idea/
+params.js
+params.json

README.md

@@ -227,9 +227,9 @@ Each one of them encapsulates the operations related to it (like listing, updati
 - Creates a theme with the given configuration
 - See more details of the payload in [the documentation](https://developer.typeform.com/create/reference/create-theme/)
 
-#### `themes.update({ background, colors, font, hasTransparentButton, name })`
+#### `themes.update({ id, background, colors, font, hasTransparentButton, name })`
 
-- Updates a theme with the given configuration
+- Updates a theme with the given configuration, requires `id`
 - See more details of the payload in [the documentation](https://developer.typeform.com/create/reference/update-theme/)
 
 #### `themes.delete({ id })`

src/bin.ts

@@ -1,4 +1,5 @@
 import { inspect } from 'util'
+import { readFileSync, existsSync } from 'fs'
 
 import { createClient, Typeform } from './index'
 
@@ -34,13 +35,25 @@ if (!typeformAPI[property]?.[method]) {
 }
 
 let parsedParams = undefined
+let normalizedParams = undefined
 
 if (methodParams && methodParams.length > 0) {
   const methodParamsString = methodParams.join(',')
-  const normalizedParams = methodParamsString.startsWith('{')
+  normalizedParams = methodParamsString.startsWith('{')
     ? methodParamsString
     : `{${methodParamsString}}`
+} else {
+  const dir = process.cwd()
+  const jsonFile = `${dir}/params.json`
+  const jsFile = `${dir}/params.js`
+  if (existsSync(jsonFile)) {
+    normalizedParams = `JSON.parse(\`${readFileSync(jsonFile, 'utf-8')}\`)`
+  } else if (existsSync(jsFile)) {
+    normalizedParams = readFileSync(jsFile, 'utf-8')
+  }
+}
 
+if (normalizedParams) {
   try {
     // this eval executes code supplied by user on their own machine, this is safe
     // eslint-disable-next-line no-eval

src/themes.ts

@@ -6,12 +6,14 @@ export class Themes {
   constructor(private _http: Typeform.HTTPClient) {}
 
   public create(args: {
-    id?: string
     background?: Typeform.ThemeBackground
     colors: Typeform.ThemeColors
     font: Typeform.Font
     hasTransparentButton?: boolean
     name: string
+    fields?: Typeform.ThemeFontSizeAndAlignment
+    screens?: Typeform.ThemeFontSizeAndAlignment
+    roundedCorners?: Typeform.ThemeRoundedCorners
   }): Promise<Typeform.Theme> {
     return createOrUpdateTheme(this._http, args)
   }
@@ -58,13 +60,19 @@ export class Themes {
   }
 
   public update(args: {
-    id?: string
+    id: string
     background?: Typeform.ThemeBackground
     colors: Typeform.ThemeColors
     font: Typeform.Font
     hasTransparentButton?: boolean
     name: string
+    fields?: Typeform.ThemeFontSizeAndAlignment
+    screens?: Typeform.ThemeFontSizeAndAlignment
+    roundedCorners?: Typeform.ThemeRoundedCorners
   }): Promise<Typeform.Theme> {
+    if (!args.id) {
+      throw new Error(`The property id is required`)
+    }
     return createOrUpdateTheme(this._http, args)
   }
 }
@@ -78,9 +86,22 @@ const createOrUpdateTheme = (
     font: Typeform.Font
     hasTransparentButton?: boolean
     name: string
+    fields?: Typeform.ThemeFontSizeAndAlignment
+    screens?: Typeform.ThemeFontSizeAndAlignment
+    roundedCorners?: Typeform.ThemeRoundedCorners
   }
 ): Promise<Typeform.Theme> => {
-  const { id, background, colors, font, hasTransparentButton, name } = args
+  const {
+    id,
+    background,
+    colors,
+    font,
+    hasTransparentButton,
+    name,
+    fields,
+    screens,
+    roundedCorners,
+  } = args
   // check if required properties are defined
   const requiredProperties: Typeform.Theme = { name, font, colors }
   Object.getOwnPropertyNames(requiredProperties).forEach(
@@ -98,10 +119,15 @@ const createOrUpdateTheme = (
   return http.request({
     method: id ? 'put' : 'post',
     url: id ? `/themes/${id}` : '/themes',
-    background,
-    colors,
-    font,
-    has_transparent_button: !!hasTransparentButton,
-    name,
+    data: {
+      background,
+      colors,
+      font,
+      has_transparent_button: !!hasTransparentButton,
+      fields,
+      screens,
+      rounded_corners: roundedCorners,
+      name,
+    },
   })
 }

src/typeform-types.ts

@@ -1140,6 +1140,10 @@ export namespace Typeform {
      * Colors the theme will apply to answers, background, buttons, and questions.
      */
     colors?: ThemeColors
+    /**
+     * Font size and alignment for fields.
+     */
+    fields?: ThemeFontSizeAndAlignment
     /**
      * Default: `"Source Sans Pro"`
      * Font for the theme.
@@ -1157,6 +1161,14 @@ export namespace Typeform {
      * Name of the theme.
      */
     name?: string
+    /**
+     * Specifies border radius style of buttons and other elements in the form.
+     */
+    rounded_corners?: ThemeRoundedCorners
+    /**
+     * Font size and alignment for welcome and thankyou screens.
+     */
+    screens?: ThemeFontSizeAndAlignment
     /**
      * Default: `"private"`
      * Specifies whether the theme is `public` (one of Typeform's built-in themes that are available in all accounts) or `private`
@@ -1203,6 +1215,17 @@ export namespace Typeform {
      */
     question?: string
   }
+  /**
+   * Font size and alignment.
+   */
+  export interface ThemeFontSizeAndAlignment {
+    alignment?: 'left' | 'center'
+    font_size?: 'small' | 'medium' | 'large'
+  }
+  /**
+   * Specifies border radius style of buttons and other elements in the form.
+   */
+  export type ThemeRoundedCorners = 'none' | 'small' | 'large'
   /**
    * Object that specifies the settings and properties for the form's thank you screen.
    */

tests/unit/themes.test.ts

@@ -99,3 +99,8 @@ test('Updating a theme has the correct path and method', async () => {
   expect(axios.history.put[0].url).toBe(`${API_BASE_URL}/themes/2`)
   expect(axios.history.put[0].method).toBe('put')
 })
+
+test('Updating a theme without id throws', async () => {
+  // @ts-ignore
+  expect(() => themesRequest.update(mockThemePayload)).toThrow()
+})