Skip to content

Latest commit

 

History

History
executable file
·
122 lines (84 loc) · 5.61 KB

CONTRIBUTING.md

File metadata and controls

executable file
·
122 lines (84 loc) · 5.61 KB
Raw

Contributors Guide

Hey, there! 👋🏾

We welcome all kinds of contributions, please feel free to contribute and/or ask questions.

To get started:

  • Ensure you read the Getting Started && Installation guide.

  • Join our Discord Server and subscribe to the #engineering channel.

  • Check the issues for open tickets and request to be assigned to whichever you want to work on.

  • Ensure to explain the estimated duration it would take you to complete the task upon assignment.

  • Feel free to also open issue(s) if you want to work on something else, propose an idea or report a bug.

  • We use commitizen on this project, ensure to read the docs if you are not familar with commitizen.

  • Create a pull request and ensure to follow the PULL REQUEST TEMPLATE.

  • Wait for a review, you will be notified if your PR is ready to be merged or still needs some modifications or clarifications.

  • Once merged, feel free and pick another ticket 🎉.

  • We recognize contributors in a way that rewards each and every contribution, not just code. Check out the reward Emoji keys.

Tech Stacks

A tech stack is the set of technologies an organization uses to build a web or mobile application. It is a combination of programming languages, frameworks, libraries, patterns, servers, design tools, and tools used by its developers.

  • 🌈 Figma: For designing common reusable UI components, prototypes and collaboration.
  • 📚 Storybook: For developing UI components in isolation
    • 📝 Storysource: Addon to view story code to paste it in your project
    • 🔍 Viewport: Addon to allow stories to be displayed in different sizes and layouts in Storybook
    • 📕 Docs: Addon for automatic documentation generation from stories
  • ⚛️ Gatsby [React + GraphQL + Webpack]: For building declarative component-centric UI and static websites
  • 🖌️ Tailwindcss: For building rapidly custom designs
  • 💥 PostCSS: For transforming CSS with JavaScript
  • ✨ Prettier for automatic code formatting
  • 🚥 CircleCI: For continuous integration
  • 🃏 Jest: For unit testing components
  • ✅ Cypress: For JavaScript e2e testing
  • 📐 ESLint: For JavaScript linting
  • 📦 npm: For distributing JavaScript libraries
  • 🗃️ GitHub: Hosting service for version control
  • 🚀 Netlify: For fast & continuous deployment
  • 🛠 Commitizen: Command line utility tool for git commits

Conventions

Conventions include generic patterns that ensure that written code adheres to certain formatting conventions.

Code

  • Tabs or two-space indentation
  • Use shorthand for conditional statements
  • Always open braces on the same line as the previous statement and close braces on the same indent as the original function like so:
function textComponent() {
  return {
    name: "OSCA"
  };
}

Naming

  • Constructor functions should use the TitleCase
  • Variables, directories and methods should use the camelCase
  • Variables or elements with multiple words should always use an underscore between words.
const user_params = null;
  • Private methods should start with a leading underscore to separate them from public methods
const _inputType = inputType;
  • Abbreviations should be avoided please to avoid confusion
  • Comments should include enough information about what a part of code is supposed to do.
// Define default props of the TextBox component

TextBox.defaultProps = {
  className: "",
  disabled: false,
  inputType: "text"
};

Styling

This project uses the BEM Methodology with camelCase style. Read the start guide here

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks

Naming Rules:

blockName__elementName_modifierName_modifierValue
  • Names are written in lowercase Latin letters.
  • Each word inside a name begins with an uppercase letter.
  • The block name defines the namespace for its elements and modifiers.
  • The element name is separated from the block name by a double underscore (__).
  • The modifier name is separated from the block or element name by a single underscore (_).
  • The modifier value is separated from the modifier name by a single underscore (_).
  • For boolean modifiers, the value is not included in the name.

Financial contributions

We also welcome financial contributions in full transparency on our open collective. Anyone can make a donation or file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.