@formbird/schematics

Formbird Component Schematics

This repository is a collection of schematics for creating components to run in formbird. Formbird components are custom elements, which is part of the web components standard, and they can be developed using different component frameworks as long as the component is wrapped in a custom element. This schematic collection generates components that are ready to load in a formbird form.

Prerequisites

1. Make sure you've got Node.js 12 and npm installed.

2. Install @angular-devkit/schematics with:

   npm install @angular-devkit/schematics-cli -g

3. Install the formbird schematics with:

   npm install @formbird/schematics -g

React

To generate a React component:

1. Run the schematic with:

   npx schematics @formbird/schematics:react-component

2. You will be prompted for the component name. Enter a hyphenated component name that is all lower-case, with the first section of the name being a prefix for your set of components. Formbird uses "sc" as a prefix for standard components, but third-parties can use a prefix for their company or project name to identify their own set of components. An example is:

   re-chips

After entering the component name, a series of files are generated:

/Volumes/Projects/react/schematic-test npx schematics @formbird/schematics:react-component
? Enter the component name? re-chips
CREATE re-chips/package.json (503 bytes)
CREATE re-chips/tsconfig.json (262 bytes)
CREATE re-chips/webpack.config.js (529 bytes)
CREATE re-chips/json/re-chips.component.json (1011 bytes)
CREATE re-chips/json/re-chips.template.json (414 bytes)
CREATE re-chips/src/index.ts (37 bytes)
CREATE re-chips/src/components/ReChips.tsx (703 bytes)
CREATE re-chips/src/utils/CustomElementWrapper.tsx (1877 bytes)

3. Upload the following generated files through the formbird template editor:

   a) json/re-chips.component.json - the component document for the component b) json/re-chips.template.json - a simple test template that can be used to load the component in formbird

4. Navigate to the folder for the component and run yarn to install the node modules:

   npm install

or

npx yarn

Yarn is faster than npm and is the preferred way to install modules for formbird. Whichever one you use, you should use the same one every time because they both generate a lock file to ensure that the same versions of dependencies are always installed.

5. Then build the component with:

   npm run build

or to build the component automatically when you change the code, you can build in watch mode with:

npm run watch

Watch mode is useful when working on the component so you don't have to keep running the build command on every change.

6. Load the component in formbird by reading the documentId from the template file that was uploaded in step 3a:

   "documentId": "c6385ead-7b5c-458f-8421-ca017465bb1e",

The url will be https:///form/c6385ead-7b5c-458f-8421-ca017465bb1e . Eg. https://re.formbird.com/form/c6385ead-7b5c-458f-8421-ca017465bb1e

7. You should see a simple component with the following text:

   re-chips works. Please edit src/components/ReChipsComponent.tsx to make changes