feat(TU-3717): Release to yarn (#2)

Typeform · Dec 5, 2023 · a663af3 · a663af3
1 parent 8215e56
commit a663af3
Show file tree

Hide file tree

Showing 18 changed files with 2,755 additions and 119 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -53,8 +53,9 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
           AWS_CLOUDFRONT_DIST: 'E3IUO95IYL1RI3'
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          JARVIS_NOTIFY_PREVIEW_TEMPLATE: ${{ secrets.JARVIS_NOTIFY_PREVIEW_TEMPLATE }}
           PUBLIC_CDN_URL: 'https://btn.typeform.com'
           SEGMENT_WRITE_KEY: ${{ secrets.DEPLOYMENT_SEGMENT_WRITE_KEY }}
 

diff --git a/.releaserc b/.releaserc
@@ -0,0 +1,25 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    ["@semantic-release/commit-analyzer", {
+      "releaseRules": [
+        {breaking: true, release: "major"},
+        {revert: true, release: "patch"},
+        {type: "feat", release: "minor"},
+        {type: "fix", release: "patch"},
+        {type: "perf", release: "patch"},
+        {type: "chore", scope: "deps", release: "patch"}
+      ],
+      "parserOpts": {
+        "noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
+      }
+    }],
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/git",
+    "@semantic-release/github"
+  ]
+}
diff --git a/README.md b/README.md
@@ -3,9 +3,9 @@
 Integrate Typeform Admin UI in your web app - as an iframe or a popup.
 
 > [!WARNING]
-> Please keep in mind this is an _early alpha version_, and currently we do not provide any support.
+> Please keep in mind this is an _early version_, and [we provide limited support](https://github.com/Typeform/button/issues) at the moment.
 
-## Usage
+## Usage in browser
 
 As HTML button:
 
@@ -14,7 +14,7 @@ As HTML button:
 <script src="dist/button.js"></script>
 <script>
   // you still need to implement the callback in JavaScript
-  function handleSelect(action, { formId }) {
+  function handleSelect({ action, formId }) {
     console.log(`you have selected form with id ${formId}`)
   }
 </script>
@@ -27,27 +27,51 @@ Or using JavaScript:
 <script src="dist/button.js"></script>
 <script>
   // you only need to configure settings once
-  window.tfEmbedAdmin.configure({ type: 'iframe' })
+  window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe' })
 
-  const callback = (action, { formId }) => {
+  const callback = ({ action, formId }) => {
     console.log(`you have selected form with id ${formId}`)
   }
 
   const selectTypeform = () => {
-    window.tfEmbedAdmin.selectForm(callback)
+    window.tfEmbedAdmin.selectForm({ callback })
   }
 </script>
 ```
 
+## Usage as ESM module
+
+Install the package as dependency via `yarn`:
+
+```bash
+yarn add @typeform/button
+```
+
+Then you can use the SDK in your own application, e.g. in React:
+
+```javascript
+import { selectForm } from '@typeform/button'
+
+export const SelectFormButton = () => {
+  const handleSelect = () => {
+    selectForm({
+      callback: ({ action, formId }) => console.log(`you just selected form id: ${formId}`),
+    })
+  }
+
+  return <button onClick={handleSelect}>select form</button>
+}
+```
+
 ## Options
 
 There are 3 available methods:
 
-### configure(config)
+### setDefaultConfiguration(config)
 
 Configure the embed admin settings.
 
-It accepts `config` object:
+It accepts an object with the following props:
 
 | name    | type                  | description                                                                                                                                                                                    | default value              |
 | ------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
@@ -57,28 +81,32 @@ It accepts `config` object:
 Example with JavaScript:
 
 ```javascript
-window.tfEmbedAdmin.configure({
+window.tfEmbedAdmin.setDefaultConfiguration({
   type: 'iframe',
   appName: 'my-app',
 })
 ```
 
 When using HTML API you don't need to call this method separately. You need to specify config options on the button itself.
 
-### selectForm(callback)
+### selectForm({ callback})
 
 Open embed admin to select form or create a new one.
 
-It accepts `callback` method:
+It accepts an object with the following props:
 
 | name     | type                                                    | description                                                       |
 | -------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
-| callback | `(action: string, payload: { formId: string }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
+| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
+| type     | `"iframe" \| "popup"`                                   | Optional. See `setDefaultConfiguration` above.                    |
+| appName  | `string`                                                | Optional. See `setDefaultConfiguration` above.                    |
 
 Example with JavaScript:
 
 ```javascript
-window.tfEmbedAdmin.selectForm((action, id) => console.log(`you just selected form id: ${id}`))
+window.tfEmbedAdmin.selectForm({
+  callback: ({ action, formId }) => console.log(`you just selected form id: ${formId}`),
+})
 ```
 
 Or with HTML API:
@@ -93,27 +121,32 @@ Or with HTML API:
   select typeform
 </button>
 <script>
-  function embedAdminCallback() {
+  function embedAdminCallback({ action }) {
     // callback function needs to be available on global scope (window)
   }
 </script>
 ```
 
-### editForm(formId, callback)
+### editForm({ formId, callback })
 
 Open embed admin to edit a specific form.
 
-It accepts `formId` string and `callback` method:
+It accepts an object with the following props:
 
 | name     | type                                                    | description                                                     |
 | -------- | ------------------------------------------------------- | --------------------------------------------------------------- |
 | formId   | `string`                                                | ID of the typeform to edit                                      |
-| callback | `(action: string, payload: { formId: string }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
+| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
+| type     | `"iframe" \| "popup"`                                   | Optional. See `setDefaultConfiguration` above.                  |
+| appName  | `string`                                                | Optional. See `setDefaultConfiguration` above.                  |
 
 Example with JavaScript:
 
 ```javascript
-window.tfEmbedAdmin.editForm(myTypeformId, (action, id) => console.log(`you just edited form id: ${id}`))
+window.tfEmbedAdmin.editForm({
+  formId: myTypeformId,
+  callback: ({ action, formId }) => console.log(`you just edited form id: ${formId}`),
+})
 ```
 
 Or with HTML API:
@@ -128,7 +161,7 @@ Or with HTML API:
   edit typeform
 </button>
 <script>
-  function embedAdminCallback() {
+  function embedAdminCallback({ action, formId }) {
     // callback function needs to be available on global scope (window)
   }
 </script>
@@ -148,7 +181,7 @@ Or [open the demo in CodeSandbox](https://codesandbox.io/s/github/Typeform/butto
 
 ## Development
 
-Requiremenets:
+Requirements:
 
 - node >= 20
 - yarn
@@ -173,6 +206,6 @@ yarn start
 
 ## Support and Contribution
 
-Please keep in mind this is an _early alpha version_, and currently we do not provide any support.
+Please keep in mind this is an _early version_, and we provide limited support at the moment.
 
-However, feel free to [open a Github Issue with your question](https://github.com/Typeform/button/issues) we are open to discussion.
+However, feel free to [open a Github Issue with your question](https://github.com/Typeform/button/issues), we are open to discussion.
diff --git a/demo/embed.html b/demo/embed.html
@@ -45,7 +45,7 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
 
     <!-- custom script -->
     <script>
-      window.tfEmbedAdmin.configure({ type: 'iframe', appName: 'embed-demo-app' })
+      window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe', appName: 'embed-demo-app' })
 
       const fetchTypeformDetails = async (formId) => {
         const result = await fetch(
@@ -58,7 +58,7 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
         const { title, author_url: url, thumbnail_url: image } = data || {}
         return { title, url, image: image?.href ?? image }
       }
-      const onSelect = async (action, { formId }) => {
+      const onSelect = async ({ action, formId }) => {
         console.log('selected form:', formId)
 
         const { title, image } = await fetchTypeformDetails(formId)
@@ -96,12 +96,14 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
 
         document.querySelector('#typeforms').append(container)
       }
-      const onEdit = (action, { formId }) => {}
+      const onEdit = ({ action, formId }) => {
+        console.log(`Form ${formId} was edited`)
+      }
       const selectTypeform = () => {
-        window.tfEmbedAdmin.selectForm(onSelect)
+        window.tfEmbedAdmin.selectForm({ callback: onSelect })
       }
       const editTypeform = (formId) => {
-        window.tfEmbedAdmin.editForm(formId, onEdit)
+        window.tfEmbedAdmin.editForm({ formId, callback: onEdit })
       }
     </script>
     <button onclick="selectTypeform()">select form</button>

diff --git a/demo/iframe-html.html b/demo/iframe-html.html
@@ -21,10 +21,10 @@ <h1>Typeform Button Demo - Iframe HTML</h1>
       function handleClick() {
         console.log('select button clicked')
       }
-      function handleEdit(action, { formId }) {
+      function handleEdit({ action, formId }) {
         console.log(`form ${formId} was edited`)
       }
-      function handleSelect(action, { formId }) {
+      function handleSelect({ action, formId }) {
         console.log(action, formId)
         const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-type="iframe" data-tf-embed-admin-callback="handleEdit">edit</button>`
         document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`

diff --git a/demo/iframe-js.html b/demo/iframe-js.html
@@ -9,9 +9,9 @@
     <h1>Typeform Button Demo - Iframe JS</h1>
     <script src="dist/button.js"></script>
     <script>
-      window.tfEmbedAdmin.configure({ type: 'iframe' })
+      window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe' })
 
-      const callback = (action, { formId }) => {
+      const callback = ({ action, formId }) => {
         if (action === 'edit') {
           console.log(`form ${formId} was edited`)
           return
@@ -30,10 +30,10 @@ <h1>Typeform Button Demo - Iframe JS</h1>
         document.querySelector('#typeforms').append(li)
       }
       const selectTypeform = () => {
-        window.tfEmbedAdmin.selectForm(callback)
+        window.tfEmbedAdmin.selectForm({ callback })
       }
       const editTypeform = (formId) => {
-        window.tfEmbedAdmin.editForm(formId, callback)
+        window.tfEmbedAdmin.editForm({ formId, callback })
       }
     </script>
     <button onclick="selectTypeform()">select form</button>

diff --git a/demo/index.html b/demo/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <h1>Typeform Button Demo</h1>
+    <h2>From CDN:</h2>
     <p>Basic:</p>
     <ul>
       <li><a href="./iframe-html.html">Iframe HTML</a></li>
@@ -18,5 +19,10 @@ <h1>Typeform Button Demo</h1>
     <ul>
       <li><a href="./embed.html">Embed SDK</a></li>
     </ul>
+    <h2>As NPM package:</h2>
+    <p>In browser:</p>
+    <ul>
+      <li><a href="react.html">React app</a></li>
+    </ul>
   </body>
 </html>
diff --git a/demo/popup-html.html b/demo/popup-html.html
@@ -11,10 +11,10 @@ <h1>Typeform Button Demo - Popup HTML</h1>
     <ul id="typeforms"></ul>
     <script src="dist/button.js"></script>
     <script>
-      function handleEdit(action, { formId }) {
+      function handleEdit({ action, formId }) {
         console.log(`form ${formId} was edited`)
       }
-      function handleSelect(action, { formId }) {
+      function handleSelect({ action, formId }) {
         console.log(action, formId)
         const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-callback="handleEdit">edit</button>`
         document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`

diff --git a/demo/popup-js.html b/demo/popup-js.html
@@ -9,7 +9,7 @@
     <h1>Typeform Button Demo - Popup JS</h1>
     <script src="dist/button.js"></script>
     <script>
-      const callback = (action, { formId }) => {
+      const callback = ({ action, formId }) => {
         if (action === 'edit') {
           console.log(`form ${formId} was edited`)
           return
@@ -28,10 +28,10 @@ <h1>Typeform Button Demo - Popup JS</h1>
         document.querySelector('#typeforms').append(li)
       }
       const selectTypeform = () => {
-        window.tfEmbedAdmin.selectForm(callback)
+        window.tfEmbedAdmin.selectForm({ callback })
       }
       const editTypeform = (formId) => {
-        window.tfEmbedAdmin.editForm(formId, callback)
+        window.tfEmbedAdmin.editForm({ formId, callback })
       }
     </script>
     <button onclick="selectTypeform()">select form</button>