Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update formspree configuration to the block instead of manifest #415

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Update formspree configuration to the block instead of manifest #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d91a126
Update formspree configuration to the block instead of manifest
addisonschultz Feb 26, 2024
7b426fe
Add changeset
addisonschultz Feb 26, 2024
c61a250
Persist state to configuration object
addisonschultz Sep 25, 2024
60b2c35
Remove toggle temporarily, show all fields
addisonschultz Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wise-geckos-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@gitbook/integration-formspree': minor
---

Updates the configuration of the formspree integration to the block itself, instead of in the manifest
18 changes: 3 additions & 15 deletions integrations/formspree/gitbook-manifest.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ description: A simple Formspree integration to collect user signups directly in
summary: |
# Overview
The GitBook Formspree integration allows you to specify a form ID from your Formspree account to collect user signups.

# Configure
You can install the integration on a single space by clicking the integrations button in sub-navigation panel. If you prefer to install the Formspree integration on multiple on all spaces you can enable this through organization settings. From here you can specify different Formspree IDs for different spaces.

You can customize the integration's form fields directly from the block itself. Press the Action menu with the block selected to see the available customization options.
icon: ./assets/formspree-icon.png
previewImages:
- ./assets/formspree-banner.png
Expand All @@ -30,19 +33,4 @@ configurations:
type: string
title: Formspree endpoint
description: The endpoint your formspree lives at.
email:
type: boolean
title: Email
description: An email field for your form
default: true
name:
type: boolean
title: Name
description: A name field for your form
default: false
message:
type: boolean
title: Message
description: A message field for your form
default: false
secrets: {}
1 change: 1 addition & 0 deletions integrations/formspree/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "@gitbook/integration-formspree",
"private": true,
"version": "1.0.0",
"scripts": {
"lint": "eslint ./**/*.ts*",
"typecheck": "tsc --noEmit",
Expand Down
141 changes: 99 additions & 42 deletions integrations/formspree/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createIntegration, createComponent } from '@gitbook/runtime';

import { handleSubmit } from './utils';
import { saveSpaceConfiguration, handleSubmit } from './utils';

type FormspreeContext = {
environment: {
Expand All @@ -10,6 +10,9 @@
email: string;
name: string;
message: string;
emailVisible?: boolean;
nameVisible?: boolean;
messageVisible?: boolean;
};
};
};
Expand All @@ -21,11 +24,17 @@

const formspreeBlock = createComponent({
componentId: 'formspree',
initialState: {
email: '',
name: '',
message: '',
formSubmitted: false,
initialState: (props: any) => {
console.log('PROPS on create component: ', props);

Check failure on line 28 in integrations/formspree/src/index.tsx

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement
return {
email: '',
name: '',
message: '',
emailVisible: props.spaceInstallation?.configuration?.emailVisible || true,
nameVisible: props.spaceInstallation?.configuration?.nameVisibile || false,
messageVisible: props.spaceInstallation?.configuration?.messageVisible || false,
formSubmitted: false,
};
},
action: async (element, action: FormspreeAction, context: FormspreeContext) => {
switch (action.action) {
Expand All @@ -38,58 +47,106 @@
return {
state: {
formSubmitted: true,
...element.state,
},
};
case 'toggleEmail': {
const emailToggle =
!context.environment.spaceInstallation.configuration.emailVisible;
await saveSpaceConfiguration(context, {
...element.state,
emailVisible: emailToggle,
});
return element;
}
case 'toggleName': {
const nameToggle = !context.environment.spaceInstallation.configuration.nameVisible;
await saveSpaceConfiguration(context, {
...element.state,
nameVisible: nameToggle,
});
return element;
}
case 'toggleMessage': {
const messageToggle =
!context.environment.spaceInstallation.configuration.messageVisible;
await saveSpaceConfiguration(context, {
...element.state,
messageVisible: messageToggle,
});
return element;
}
}
},
render: async (element, context: FormspreeContext) => {
const spaceInstallationConfigration = context.environment.spaceInstallation.configuration;

console.log('Rendering State: ', element.state);

Check failure on line 84 in integrations/formspree/src/index.tsx

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement
console.log('Rendering Configuration: ', spaceInstallationConfigration);

Check failure on line 85 in integrations/formspree/src/index.tsx

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement
return (
<block>
<block
// controls={[
// {
// label: 'Toggle Email',
// onPress: {
// action: 'toggleEmail',
// },
// },
// {
// label: 'Toggle Name',
// onPress: {
// action: 'toggleName',
// },
// },
// {
// label: 'Toggle Messsage',
// onPress: {
// action: 'toggleMessage',
// },
// },
// ]}
>
<hstack>
{/* Email */}
{context.environment.spaceInstallation?.configuration.email ? (
<box grow={1}>
<input
label="Email"
element={<textinput state="email" placeholder="Your email" />}
/>
</box>
) : null}
<box grow={1}>
<input
label="Email"
element={<textinput state="email" placeholder="Your email" />}
/>
</box>

{/* Name */}
{context.environment.spaceInstallation?.configuration.name ? (
<box grow={1}>
<input
label="Name"
element={<textinput state="name" placeholder="Your name" />}
/>
</box>
) : null}
<box grow={1}>
<input
label="Name"
element={<textinput state="name" placeholder="Your name" />}
/>
</box>
</hstack>

<vstack>
{/* Message */}
{context.environment.spaceInstallation?.configuration.message ? (
<box grow={2}>
<input
label="Message"
element={
<textinput
state="message"
placeholder="Your message"
multiline={true}
/>
}
/>
</box>
) : null}
<box grow={2}>
<input
label="Message"
element={
<textinput
state="message"
placeholder="Your message"
multiline={true}
/>
}
/>
</box>
</vstack>

<button
label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
onPress={{ action: 'submit' }}
disabled={element.state.formSubmitted}
/>
<box grow={2}>
<button
label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
onPress={{ action: 'submit' }}
disabled={element.state.formSubmitted}
/>
</box>
</block>
);
},
Expand Down
25 changes: 25 additions & 0 deletions integrations/formspree/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,28 @@
}
return object;
}

/**
* Save the space configuration for the current space installation.
*/
export async function saveSpaceConfiguration(context, state) {
const { api, environment } = context;
const spaceInstallation = environment.spaceInstallation;

console.log('state trying to be saved: ', state);

Check failure on line 45 in integrations/formspree/src/utils.ts

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement

// Save the space installation configuration
const { data } = await api.integrations.updateIntegrationSpaceInstallation(
spaceInstallation.integration,
spaceInstallation.installation,
spaceInstallation.space,
{
configuration: {
...spaceInstallation.configuration,
...state,
},
}
);

console.log('Just saved data: ', data.configuration);

Check failure on line 60 in integrations/formspree/src/utils.ts

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement
}
Loading