Widget form generator(common)

Widget form generator project is managing widget creation suite formular with its translations(managed via googlesheets) and its components library, for now also reused in editor.

Common widget-form-generator is a monorepo devided into 3 workspaces: @abtasty/widget-form-generator, @abtasty/editor-ui and @abtasty/editor-translations. Workspaces are located in packages/ folder.

Installation

To install this project correctly you should have already installed: - node >= 12.13.1 - yarn >= 1.7.0

Then just run yarn install.

widget-form-generator

@abtasty/widget-form-generator is a parent project, it's historically depending on two other projects: @abtasty/editor-ui and @abtasty/editor-translations.

To test this project, please, run npm link here in parent directory and then on editor: npm link @abtasty/widget-form-generator.

Usage

//
import mount from '@abtasty/widget-form-generator';

const parent = document.querySelector('#root');
const form = [
  { type: 'text', name: 'firstname', label: 'Firstname', defaultValue: 'Jean-Pierre', placeholder: 'Enter your firstname' },
  { type: 'text', name: 'lastname', label: 'Lastname', placeholder: 'Enter your lastname' },
  { type: 'select', name: 'job', label: 'Job', placeholder: 'Your job', options: [
    { label: 'Developer', value: 'dev' },
    { label: 'Sales', value: 'sales' },
  ]},
  { type: 'checkbox', name: 'agree', label: 'I agree' }
];
const initialValues = {
};
const onSubmit = (result) => { console.log(result) };
const lang = 'fr';

mount(parent, form, initialValues, onSubmit, lang);

editor-ui

This project is basically a library of react components.

You can install it in any other projet to use its components.

Usage

Is used in editor like:

import React from 'react';
import ReactDOM from 'react-dom';
import { component } from '@abtasty/editor-ui';

const componentProps = {};

// to render component
ReactDOM.render(
    React.createElement(component, componentProps),
  containerWhereYouRenderComponent,
);

// to remove component
ReactDOM.unmountComponentAtNode(containerWhereYouRenderComponent);

Testing

You can test component using storybook. To run storybook you should execute: yarn start:editorUI in project parent folder.

To test locally with editor, please, run npm link in packages/editor-ui, then npm link @abtasty/editor-ui on editor side. And finally run local editor.

Troubleshooting

There's a known bug on npm while symlinking some react dependent modules. Your rendering on editor might be broken once you'll symlink this module. You can probably have an error related to multiple react versions.

In this case, please go to packages/editor-ui and run npm link __editorProjectPath__/node_modules/react.

editor-translations

For now this project is used only for widget form generator translations.

Please, note that this part of project is using googlesheets api, which is accessible only throw ABTasty VPN. You can run yarn update:translations in parent directory to update translations.

Once translations are updated run yarn build to build a package with new translations.

Git workflow

1. Work on custom branch, based on 'master'.
2. Do your work and once you think it’s finished:
   • run 'yarn prettier',
   • pass now - 'yarn lint' has been used previously, at the moment removed from CI, code is not adapted either,
   • pass for now - 'yarn test' before pushing, tests are broken
3. Push your local branch and create a merge request 'master' branch.
4. Post this MR (the link) on #widget-form-generator slack channel in order for devs to review and validate it.
5. When the code is validated, merge on master. The CI will process and will auto-deploy the NPM packages (@abtasty/editor-ui and @abtasty/widget-form-generator).
6. Create the MR on editor project, based on 'staging' branch to update the widget-form-generator and editor-ui packages versions.
7. Once QA validate your work, ticket will be sent on ready to prod column and we will know that your work can be shipped on thursday realease !