Frontend Development

Code style

We use multiple different libraries that forces the code to be consistent. Please make sure your code editor has all possible plugins installed!

• we use spaces 🙊
• JSDoc currently we comment everything, but will be dropping it when we move to TypeScript
• editorconfig (our config) - best set it to autofix on file save
• prettier (our config) - as for now please use it only on files you've edited in a great way, or on new files
• eslint (our config)
• stylelint (our config)
• coffeelint (our config)
• we prefer () => {} over function () {} for unnamed callback functions for brevity

Files architecture

Some rules we follow:

• only one React component per file
• generally we prefer smaller files
• when creating new React component:
  • you should create all it's files next to it, e.g.:

    jsapp/js/components/submissions/table.es6
    jsapp/js/components/submissions/table.tests.es6
    jsapp/js/components/submissions/table.scss
    

  • import styles file in the component .es6 file
• group .es6 files by feature, e.g. library/, submissions/
• generic/common React components go to jsapp/js/components/common directory
• don't use relative paths in imports

Adding new icons

Some notes first:

• we generate an icons font from svg files using webfonts-generator package
• the source of the icons is the Sketch file from our Google Drive: /Kobo Product Design/Design Current/04. Design/Comps Sketch/Icons.sketch
• all the icons need to have the same artboard size (webfonts-generator requirement)
• after kpi#3305 is done, this will be much simpler 😇

Steps to take when adding new icon:

1. Open Icons.sketch
2. Create new artboard Icons/<icon-name>, make sure it is exportable (easiest way is to clone an existing one)
3. Draw the icon or drag&drop existing SVG file, make sure the paths are combined and the color is black (#000000)
4. Export all icons
5. Copy new icon from Icons/<icon-name>.svg to jsapp/svg-icons in KPI repository
6. Run the new svg file through ImageOptim.app or some alternative non-destructive SVG compressor
7. Run npm run generate-icons
8. Use your new icon: <i className='k-icon k-icon-<icon-name>'/>