Zvook UI Kit

This is the official Zvook's UI kit. It's a rolling release repository that's currently in development.

Learn more about Zvook @ https://zvook.co

Table of Contents

1. Conventions
   1. Imports
   2. Color naming
2. Troubleshooting
   1. Windows End-of-line sequence (CRLF)
   2. Node build errors on MacOS

Conventions

Imports

ES6 modules imports should, preferably, be done at the top of the file either statically or lazy loaded. So, for example, instead of using React.useEffect throughout the code, one should do

import React, { useEffect } from 'react';

...

useEffect(...);

Imports should also be automatically organised alphabetically. See the section "Working with MS Visual Studio Code" to see how to configure this behavior.

Color naming

Variables representing colors follow a specific naming convention: $color-[base-color]-[variation]

Ex: $color-accent-light or $color-blue-dark

Troubleshooting

Windows End-of-line sequence (CRLF)

If you are working on a windows machine, you may experience Delete 'CR' ESLint errors in your files. This is caused by the end of line sequence specific to Windows which is CRLF unlike LF which the project in set up to use. Follow these 2 steps to resolve the issue:

1. Switch all files to LF EOL sequence by using a VS Code extension called Change All End Of Line Sequence by Keyoti Inc.
   • Install the extension.
   • Click F1 in VS Code, type >Change All End Of Line Sequence and hit Enter.
   • In a dialog window input file types to convert specify: .ts, .tsx.
   • In the next dialog window blacklist node_modules folder by typing: !node_modules.
   • In the new dialog window select LF.
2. The next step is to set the default EOL sequence. Open git bash or cmd and type in git config --global core.autocrlf false.

Node build errors on MacOS

If you see an error related to node-gyp or snappy while working in MacOS type

xcode-select --install