Skip to content

Commit a663af3

Browse files
mathiomathio
committed
feat(TU-3717): Release to yarn (#2)
1 parent 8215e56 commit a663af3

18 files changed

+2755
-119
lines changed

‎.github/workflows/release.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ jobs:
5353
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
5454
AWS_CLOUDFRONT_DIST: 'E3IUO95IYL1RI3'
5555
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}
56-
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
56+
GH_TOKEN: ${{ secrets.GH_TOKEN }}
5757
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
58+
JARVIS_NOTIFY_PREVIEW_TEMPLATE: ${{ secrets.JARVIS_NOTIFY_PREVIEW_TEMPLATE }}
5859
PUBLIC_CDN_URL: 'https://btn.typeform.com'
5960
SEGMENT_WRITE_KEY: ${{ secrets.DEPLOYMENT_SEGMENT_WRITE_KEY }}
6061

‎.releaserc

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"branches": [
3+
"main"
4+
],
5+
"plugins": [
6+
["@semantic-release/commit-analyzer", {
7+
"releaseRules": [
8+
{breaking: true, release: "major"},
9+
{revert: true, release: "patch"},
10+
{type: "feat", release: "minor"},
11+
{type: "fix", release: "patch"},
12+
{type: "perf", release: "patch"},
13+
{type: "chore", scope: "deps", release: "patch"}
14+
],
15+
"parserOpts": {
16+
"noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
17+
}
18+
}],
19+
"@semantic-release/release-notes-generator",
20+
"@semantic-release/changelog",
21+
"@semantic-release/npm",
22+
"@semantic-release/git",
23+
"@semantic-release/github"
24+
]
25+
}

‎README.md

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
Integrate Typeform Admin UI in your web app - as an iframe or a popup.
44

55
> [!WARNING]
6-
> Please keep in mind this is an _early alpha version_, and currently we do not provide any support.
6+
> Please keep in mind this is an _early version_, and [we provide limited support](https://github.com/Typeform/button/issues) at the moment.
77
8-
## Usage
8+
## Usage in browser
99

1010
As HTML button:
1111

@@ -14,7 +14,7 @@ As HTML button:
1414
<script src="dist/button.js"></script>
1515
<script>
1616
// you still need to implement the callback in JavaScript
17-
function handleSelect(action, { formId }) {
17+
function handleSelect({ action, formId }) {
1818
console.log(`you have selected form with id ${formId}`)
1919
}
2020
</script>
@@ -27,27 +27,51 @@ Or using JavaScript:
2727
<script src="dist/button.js"></script>
2828
<script>
2929
// you only need to configure settings once
30-
window.tfEmbedAdmin.configure({ type: 'iframe' })
30+
window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe' })
3131
32-
const callback = (action, { formId }) => {
32+
const callback = ({ action, formId }) => {
3333
console.log(`you have selected form with id ${formId}`)
3434
}
3535
3636
const selectTypeform = () => {
37-
window.tfEmbedAdmin.selectForm(callback)
37+
window.tfEmbedAdmin.selectForm({ callback })
3838
}
3939
</script>
4040
```
4141

42+
## Usage as ESM module
43+
44+
Install the package as dependency via `yarn`:
45+
46+
```bash
47+
yarn add @typeform/button
48+
```
49+
50+
Then you can use the SDK in your own application, e.g. in React:
51+
52+
```javascript
53+
import { selectForm } from '@typeform/button'
54+
55+
export const SelectFormButton = () => {
56+
const handleSelect = () => {
57+
selectForm({
58+
callback: ({ action, formId }) => console.log(`you just selected form id: ${formId}`),
59+
})
60+
}
61+
62+
return <button onClick={handleSelect}>select form</button>
63+
}
64+
```
65+
4266
## Options
4367

4468
There are 3 available methods:
4569

46-
### configure(config)
70+
### setDefaultConfiguration(config)
4771

4872
Configure the embed admin settings.
4973

50-
It accepts `config` object:
74+
It accepts an object with the following props:
5175

5276
| name | type | description | default value |
5377
| ------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
@@ -57,28 +81,32 @@ It accepts `config` object:
5781
Example with JavaScript:
5882

5983
```javascript
60-
window.tfEmbedAdmin.configure({
84+
window.tfEmbedAdmin.setDefaultConfiguration({
6185
type: 'iframe',
6286
appName: 'my-app',
6387
})
6488
```
6589

6690
When using HTML API you don't need to call this method separately. You need to specify config options on the button itself.
6791

68-
### selectForm(callback)
92+
### selectForm({ callback})
6993

7094
Open embed admin to select form or create a new one.
7195

72-
It accepts `callback` method:
96+
It accepts an object with the following props:
7397

7498
| name | type | description |
7599
| -------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
76-
| callback | `(action: string, payload: { formId: string }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
100+
| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is selected in Typeform Admin UI. |
101+
| type | `"iframe" \| "popup"` | Optional. See `setDefaultConfiguration` above. |
102+
| appName | `string` | Optional. See `setDefaultConfiguration` above. |
77103

78104
Example with JavaScript:
79105

80106
```javascript
81-
window.tfEmbedAdmin.selectForm((action, id) => console.log(`you just selected form id: ${id}`))
107+
window.tfEmbedAdmin.selectForm({
108+
callback: ({ action, formId }) => console.log(`you just selected form id: ${formId}`),
109+
})
82110
```
83111

84112
Or with HTML API:
@@ -93,27 +121,32 @@ Or with HTML API:
93121
select typeform
94122
</button>
95123
<script>
96-
function embedAdminCallback() {
124+
function embedAdminCallback({ action }) {
97125
// callback function needs to be available on global scope (window)
98126
}
99127
</script>
100128
```
101129

102-
### editForm(formId, callback)
130+
### editForm({ formId, callback })
103131

104132
Open embed admin to edit a specific form.
105133

106-
It accepts `formId` string and `callback` method:
134+
It accepts an object with the following props:
107135

108136
| name | type | description |
109137
| -------- | ------------------------------------------------------- | --------------------------------------------------------------- |
110138
| formId | `string` | ID of the typeform to edit |
111-
| callback | `(action: string, payload: { formId: string }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
139+
| callback | `(payload: { action: string, formId: string }) => void` | Method to be called when a form is edited in Typeform Admin UI. |
140+
| type | `"iframe" \| "popup"` | Optional. See `setDefaultConfiguration` above. |
141+
| appName | `string` | Optional. See `setDefaultConfiguration` above. |
112142

113143
Example with JavaScript:
114144

115145
```javascript
116-
window.tfEmbedAdmin.editForm(myTypeformId, (action, id) => console.log(`you just edited form id: ${id}`))
146+
window.tfEmbedAdmin.editForm({
147+
formId: myTypeformId,
148+
callback: ({ action, formId }) => console.log(`you just edited form id: ${formId}`),
149+
})
117150
```
118151

119152
Or with HTML API:
@@ -128,7 +161,7 @@ Or with HTML API:
128161
edit typeform
129162
</button>
130163
<script>
131-
function embedAdminCallback() {
164+
function embedAdminCallback({ action, formId }) {
132165
// callback function needs to be available on global scope (window)
133166
}
134167
</script>
@@ -148,7 +181,7 @@ Or [open the demo in CodeSandbox](https://codesandbox.io/s/github/Typeform/butto
148181

149182
## Development
150183

151-
Requiremenets:
184+
Requirements:
152185

153186
- node >= 20
154187
- yarn
@@ -173,6 +206,6 @@ yarn start
173206

174207
## Support and Contribution
175208

176-
Please keep in mind this is an _early alpha version_, and currently we do not provide any support.
209+
Please keep in mind this is an _early version_, and we provide limited support at the moment.
177210

178-
However, feel free to [open a Github Issue with your question](https://github.com/Typeform/button/issues) we are open to discussion.
211+
However, feel free to [open a Github Issue with your question](https://github.com/Typeform/button/issues), we are open to discussion.

‎demo/embed.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
4545

4646
<!-- custom script -->
4747
<script>
48-
window.tfEmbedAdmin.configure({ type: 'iframe', appName: 'embed-demo-app' })
48+
window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe', appName: 'embed-demo-app' })
4949

5050
const fetchTypeformDetails = async (formId) => {
5151
const result = await fetch(
@@ -58,7 +58,7 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
5858
const { title, author_url: url, thumbnail_url: image } = data || {}
5959
return { title, url, image: image?.href ?? image }
6060
}
61-
const onSelect = async (action, { formId }) => {
61+
const onSelect = async ({ action, formId }) => {
6262
console.log('selected form:', formId)
6363

6464
const { title, image } = await fetchTypeformDetails(formId)
@@ -96,12 +96,14 @@ <h1>Typeform Button Demo - with Embed SDK</h1>
9696

9797
document.querySelector('#typeforms').append(container)
9898
}
99-
const onEdit = (action, { formId }) => {}
99+
const onEdit = ({ action, formId }) => {
100+
console.log(`Form ${formId} was edited`)
101+
}
100102
const selectTypeform = () => {
101-
window.tfEmbedAdmin.selectForm(onSelect)
103+
window.tfEmbedAdmin.selectForm({ callback: onSelect })
102104
}
103105
const editTypeform = (formId) => {
104-
window.tfEmbedAdmin.editForm(formId, onEdit)
106+
window.tfEmbedAdmin.editForm({ formId, callback: onEdit })
105107
}
106108
</script>
107109
<button onclick="selectTypeform()">select form</button>

‎demo/iframe-html.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ <h1>Typeform Button Demo - Iframe HTML</h1>
2121
function handleClick() {
2222
console.log('select button clicked')
2323
}
24-
function handleEdit(action, { formId }) {
24+
function handleEdit({ action, formId }) {
2525
console.log(`form ${formId} was edited`)
2626
}
27-
function handleSelect(action, { formId }) {
27+
function handleSelect({ action, formId }) {
2828
console.log(action, formId)
2929
const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-type="iframe" data-tf-embed-admin-callback="handleEdit">edit</button>`
3030
document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`

‎demo/iframe-js.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
<h1>Typeform Button Demo - Iframe JS</h1>
1010
<script src="dist/button.js"></script>
1111
<script>
12-
window.tfEmbedAdmin.configure({ type: 'iframe' })
12+
window.tfEmbedAdmin.setDefaultConfiguration({ type: 'iframe' })
1313

14-
const callback = (action, { formId }) => {
14+
const callback = ({ action, formId }) => {
1515
if (action === 'edit') {
1616
console.log(`form ${formId} was edited`)
1717
return
@@ -30,10 +30,10 @@ <h1>Typeform Button Demo - Iframe JS</h1>
3030
document.querySelector('#typeforms').append(li)
3131
}
3232
const selectTypeform = () => {
33-
window.tfEmbedAdmin.selectForm(callback)
33+
window.tfEmbedAdmin.selectForm({ callback })
3434
}
3535
const editTypeform = (formId) => {
36-
window.tfEmbedAdmin.editForm(formId, callback)
36+
window.tfEmbedAdmin.editForm({ formId, callback })
3737
}
3838
</script>
3939
<button onclick="selectTypeform()">select form</button>

‎demo/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</head>
88
<body>
99
<h1>Typeform Button Demo</h1>
10+
<h2>From CDN:</h2>
1011
<p>Basic:</p>
1112
<ul>
1213
<li><a href="./iframe-html.html">Iframe HTML</a></li>
@@ -18,5 +19,10 @@ <h1>Typeform Button Demo</h1>
1819
<ul>
1920
<li><a href="./embed.html">Embed SDK</a></li>
2021
</ul>
22+
<h2>As NPM package:</h2>
23+
<p>In browser:</p>
24+
<ul>
25+
<li><a href="react.html">React app</a></li>
26+
</ul>
2127
</body>
2228
</html>

‎demo/popup-html.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ <h1>Typeform Button Demo - Popup HTML</h1>
1111
<ul id="typeforms"></ul>
1212
<script src="dist/button.js"></script>
1313
<script>
14-
function handleEdit(action, { formId }) {
14+
function handleEdit({ action, formId }) {
1515
console.log(`form ${formId} was edited`)
1616
}
17-
function handleSelect(action, { formId }) {
17+
function handleSelect({ action, formId }) {
1818
console.log(action, formId)
1919
const editButton = `<button data-tf-embed-admin-edit="${formId}" data-tf-embed-admin-callback="handleEdit">edit</button>`
2020
document.querySelector('#typeforms').innerHTML += `<li>${formId} ${editButton}</li>`

‎demo/popup-js.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<h1>Typeform Button Demo - Popup JS</h1>
1010
<script src="dist/button.js"></script>
1111
<script>
12-
const callback = (action, { formId }) => {
12+
const callback = ({ action, formId }) => {
1313
if (action === 'edit') {
1414
console.log(`form ${formId} was edited`)
1515
return
@@ -28,10 +28,10 @@ <h1>Typeform Button Demo - Popup JS</h1>
2828
document.querySelector('#typeforms').append(li)
2929
}
3030
const selectTypeform = () => {
31-
window.tfEmbedAdmin.selectForm(callback)
31+
window.tfEmbedAdmin.selectForm({ callback })
3232
}
3333
const editTypeform = (formId) => {
34-
window.tfEmbedAdmin.editForm(formId, callback)
34+
window.tfEmbedAdmin.editForm({ formId, callback })
3535
}
3636
</script>
3737
<button onclick="selectTypeform()">select form</button>

0 commit comments

Comments
 (0)