n8n/CONTRIBUTING.md
Mutasem Aldmour 5bd8f7c93e
Implement design system (#2050)
* split up main, sass imports, import new nds

* migrate most buttons

* update sizes based on feedback

* update copy buttons

* update executions list

* fix issues

* force message box buttons

* update warning color

* update more buttons

* wrap message box buttons

* update last component

* lint fixes

* add build report step

* breakout imports

* set package.json

* fix notification bug

* clean up imports

* use build directories directly

* update imports

* remove xl size

* update number inputs

* fix input width

* update line height, fix icon bug

* fix up editor

* fix spacing between buttons

* Reset line height

* revert changes to this

* revert changes

* clean up button sizes

* change to outline

* update select height

* update tooltip

* remove build report step

* clean up impl

* remove regenerator runtime

* add design system repo

* apply editorconfig

* apply editor config prettier

* lint issue

* switch to tabs

* switch to single space

* update eslintrc

* remove git modules

* update sass package

* support dart sass

* add build

* update dependency

* update contributing.md

* set repo

* update versions

* add tslint step

* update spacing to spaces, add dev step

* add test step

* add test step

* update browser lint rc

* remove .github

* delete .gitignore

* set comment for icons

* remove preview link

* update button interface

* update types

* set types

* clean up intro

* update intro

* remove assets

* move into preview

* remove headline comment

* reduce theme build

* loading executions

* match deps versions

* match deps versions

* fix lint issues

* fix lint issues

* update callback

* disable codacy for docs.css

* fix storybook issues

* add design system to docker image

* update spacing around delete sort button

* set line height to stop juggling headline

* update sizes

* clean up vars

* fix scss issues

* update button vars

* add shade color

* fix button without click

* fix buttons bug

* fix bug with executions list

* clean up theme

* update link styling

* fix typo

* run prettier

* 🎨 code format

* 🎨 code format

* 🔥 remove empty files

*  N8n 2284 new inputs (#2075)

* implement inputs

* prettier fixes

* revert unnessary change

* move input components and tooltip

* remove form elements

* move select

* update input placements

* update sizes

* update credentails

* clean up select size

* fix caret issue

* update inputs

* clean up select

* fix tags dropdown border

* clean up tags input

* fix workflow name bug

* clean up select here

* add sizes template

* fix option caret

* fix input sizes

* update date input size

* remove tags input override

* update prop

* update input size

* center run data inputs

* update disabled colors

* update execution header

* update scrollbar

* update text area spacing

* fix items in header

* update run data tooltip

* remove popover

* update prefix positions

* add filterable demo

* address design issues

* fix input issues, flip boolean input to text

* update input sufffix colors

* remove override

* speed up switch, fix toggle spacing issue

* update icon

* remove icon classes

* clean up inputs

* clean up inputs with icons

* update input spacing again

* update suffix position

* build

* Add support for xlarge inputs

* fix input issues

* fix input issue

* update listeners

* update number inputs for settings

* update append/prepend spacing

* clean up inputs, set expression input as text

* fix type errors

* fix workflow number input

* fix tags dropdown bug

* fix bugs

* fix menu item bug

* remove font weight from link element

* remove default

* fix select option

* fix contrast issues

* allow overflow x for multi selects

* fix icon

* update options select

* fix issue that resolves expression to null

* update how actions are centered

* fix up selects

* update selects to support limiting size

* update option styles

*  Apply suggestions BHesseldieck

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* 🎨 code format

Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

*  Revert "🔥 remove empty files"

This reverts commit e91ace4e52.

*  Remove private from n8n-design-system package

* 🎨 Change to spaces to stay consistent with editorconfig & others
package files

*  Fix year in license

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
2021-08-29 13:36:17 +02:00

5.6 KiB

Contributing to n8n

Great that you are here and you want to contribute to n8n

Contents

Code of Conduct

This project and everyone participating in it are governed by the Code of Conduct which can be found in the file CODE_OF_CONDUCT.md. By participating, you are expected to uphold this code. Please report unacceptable behavior to jan@n8n.io.

Directory Structure

n8n is split up in different modules which are all in a single mono repository.

The most important directories:

Development Setup

If you want to change or extend n8n you have to make sure that all needed dependencies are installed and the packages get linked correctly. Here a short guide on how that can be done:

Requirements

Build Tools

The packages which n8n uses depend on a few build tools:

Debian/Ubuntu:

apt-get install -y build-essential python

CentOS:

yum install gcc gcc-c++ make

Windows:

npm install -g windows-build-tools

lerna

n8n is split up in different modules which are all in a single mono repository. To facilitate those modules management, lerna gets used. It automatically sets up file-links between modules which depend on each other.

So for the setup to work correctly lerna has to be installed globally like this:

npm install -g lerna

Actual n8n setup

IMPORTANT: All the steps bellow have to get executed at least once to get the development setup up and running!

Now that everything n8n requires to run is installed the actual n8n code can be checked out and set up:

  1. Clone the repository

    git clone https://github.com/n8n-io/n8n.git
    
  2. Go into repository folder

    cd n8n
    
  3. Install all dependencies of all modules and link them together:

    lerna bootstrap --hoist
    
  4. Build all the code:

    npm run build
    

Start

To start n8n execute:

npm run start

To start n8n with tunnel:

./packages/cli/bin/n8n start --tunnel

Development Cycle

While iterating on n8n modules code, you can run npm run dev. It will then automatically build your code, restart the backend and refresh the frontend (editor-ui) on every change you make.

  1. Start n8n in development mode:
    npm run dev
    
  2. Hack, hack, hack
  3. Check if everything still runs in production mode
    npm run build
    npm run start
    
  4. Create tests
  5. Run all tests
    npm run test
    
  6. Commit code and create pull request

Test suite

The tests can be started via:

npm run test

If that gets executed in one of the package folders it will only run the tests of this package. If it gets executed in the n8n-root folder it will run all tests of all packages.

Create Custom Nodes

Learn about using the node dev CLI to create custom nodes for n8n.

More information can be found in the documentation of n8n-node-dev, which is a small CLI which helps with n8n-node-development.

Create a new node to contribute to n8n

Follow this tutorial on creating your first node for n8n.

Checklist before submitting a new node

There are several things to keep in mind when creating a node. To help you, we prepared a checklist that covers the requirements for creating nodes, from preparation to submission. This will help us be quicker to review and merge your PR.

Extend Documentation

The repository for the n8n documentation on docs.n8n.io can be found here.

Contributor License Agreement

That we do not have any potential problems later it is sadly necessary to sign a Contributor License Agreement. That can be done literally with the push of a button.

We used the most simple one that exists. It is from Indie Open Source which uses plain English and is literally only a few lines long.

A bot will automatically comment on the pull request once it got opened asking for the agreement to be signed. Before it did not get signed it is sadly not possible to merge it in.