Skip to content

Latest commit

 

History

History
executable file
·
138 lines (97 loc) · 7.03 KB

CONTRIBUTING.md

File metadata and controls

executable file
·
138 lines (97 loc) · 7.03 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 the #engineering channel in our Discord Server.

  • 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 Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]