Crayons is a component library based on Web Components. The goal of Crayons is to provide developers with easy to use web components that give apps a Freshworks product like user interface, while reducing the number of lines of code. Crayons is developed using StencilJS that helps build standard-based Web Components.
Crayons has a predefined set of components. As a developer, you not only can use the components in your projects but you can also contribute to Crayons, as it falls under the MIT license. We welcome all contributions, big or small.
- Forking and setting up
- Raising issues towards the repo
- Fixing an existing issue
- Creating a new component
- Fork the Crayons repository.
- Clone your forked Crayons repository.
- Change directory to the cloned repository and install all the dependencies using
npm install
. - Run
git config core.hooksPath .git/hooks/
. - Run
npm run dev
to open storybook inhttps://localhost:9000
.
Note : Please use npm instead of yarn
If you find an issue or if you want to raise a feature request in, make sure you raise an issue in https://github.com/freshworks/crayons/issues
Should you choose to work on a new issue or an existing issue from https://github.com/freshworks/crayons/issues, please follow the steps below.
- Make the required changes to the component.
- Write integrations tests and unit tests.
- Check for all lint errors, if there are any fix them.
- Run tests for all the components.
- If the component you modify is used in another component make sure you update the tests for that component as well.
- Raise a Pull Request to the Crayons Repository.
The Crayons repository uses GitHub's pre-commit hooks. To commit your changes,
-
Make your changes to the files and add the untracked files to the staging area.
-
Run
git commit
. -
Choose one of the following based on the nature of your commit.
Type Description feat A new feature fix A bug fix docs Documentation only changes style Changes that do not affect the meaning of the code(white-space, formatting, missing semi-colons, etc) refactor A code change that neither fixes a bug nor adds a feature perf A code change that improves performance test Adding missing tests or correcting existing tests build Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) ci Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) chore Other changes that don't modify src or test files revert Reverts a previous commit -
Choose the scope of the change.
? What is the scope of this change (e.g. component or file name): (press enter to skip)
-
Give a brief description for the commit.
? Write a short, imperative tense description of the change (max 94 chars):
-
Give a long description for the commit.
? Provide a longer description of the change: (press enter to skip)
-
Fill in the following details when prompted.
? Are there any breaking changes? Yes ? Describe the breaking changes: documents ? Does this change affect any open issues? No
-
Give a commit message when prompted.
-
Run
git push -u origin <your-branch>
, to push your changes to the forked repo. git hooks will run all the test before pushing the changes. if any test fails, rewrite the tests and ensure that all tests pass before pushing again. -
Go to the forked repo in github and raise a PR. If there are any comments on your PR, address them. Please wait for the PR to be approved.
Q: Githooks are not running on my repo. What do I do?
Ans: Please run git config core.hooksPath .git/hooks/
in the root of your project.