Contributing to Studentre

Thank you for taking the time to contribute!

The following is a set of guidelines for contributing to Studentre project, which is hosted in the Studenckie Koło Naukowe Informatyków "KOD" Organization on GitHub. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.

Code of Conduct

This project and everyone participating in it is governed by the Studentre Code of Conduct. By participating, you are expected to uphold this code.

Possible Ways of Contributing

Reporting Bugs

Bugs are tracked as GitHub issues. Before creating bug reports, please perform a cursory search to see if the problem has already been reported. If it has and the issue is still open, add a comment to the existing issue instead of opening a new one. When you are creating a bug report, please include as many details as possible. Fill out the required template, the information it asks for helps us resolve issues faster.

Note: If you find a Closed issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue or reference it with #issue_number in the body of your new one.

Explain the problem and include additional details to help maintainers reproduce the problem:

Use a clear and descriptive title for the issue to identify the problem.
Describe the exact steps which reproduce the problem in as many details as possible.
Provide specific examples to demonstrate the steps. Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets in the issue, use Markdown code blocks.
Describe the behavior you observed after following the steps and point out what exactly is the problem with that behavior.
Explain which behavior you expected to see instead and why.
Include screenshots and animated GIFs which show you following the described steps and clearly demonstrate the problem.
If the problem wasn't triggered by a specific action, describe what you were doing before the problem happened and share more information using the guidelines below.

Provide more context by answering these questions:

Did the problem start happening recently or was this always a problem?
Can you reliably reproduce the issue? If not, provide details about how often the problem happens and under which conditions it normally happens.

Suggesting Enhancements

Enhancement suggestions are tracked as GitHub issues. Before creating enhancement suggestions, please perform a cursory search to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. When you are creating an enhancement suggestion, please include as many details as possible. Fill in the template, including the steps that you imagine you would take if the feature you're requesting existed:

Use a clear and descriptive title for the issue to identify the suggestion.
Provide a step-by-step description of the suggested enhancement in as many details as possible.
Provide specific examples to demonstrate the steps. Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
Describe the current behavior and explain which behavior you expected to see instead and why.
Include screenshots and animated GIFs which help you demonstrate the steps or point out the part of the project which the suggestion is related to.
Explain why this enhancement would be useful to most users.
List some other websites or applications where this enhancement exists.
Specify the name and version of the OS you're using.

Contributing Code

Prerequisites

Git
Node.js
npm

The process described here has several goals:

Maintain Studentre's quality.
Fix problems that are important to users.
Engage the community in working toward the best possible Studentre.
Enable a sustainable system for Studentre's maintainers to review contributions.

Please follow these steps to have your contribution considered by the maintainers, adhering to the styleguides:

Fork this repository to your own GitHub account and then clone it to your local device (or clone the repository initially if you are a project member).
Create a new branch.
Install dependencies.
```
npm install
```
Start developing and watch for code changes.
```
npm run dev
```
Generate i18n types after changing translation keys.
```
npm run i18n
```
Check the formatting of your code.
```
npm run lint
```
Fix any existing errors.
```
npm run fix
```
Build the code
```
npm run build
```
Start production server to check everything is working properly.
```
npm run start
```
Commit your changes.
Push the new branch up to the remote.
Open a pull request.

While the prerequisites above must be satisfied prior to having your pull request reviewed, the reviewer(s) may ask you to complete additional design work, tests, or other changes before your pull request can be ultimately accepted.

Styleguides

All comments, issues, pull requests titles and descriptions, code review comments, commit messages, code comments, license, readme and all documentation must be written in English. Documentation can be translated to a different language if necessary.

Code

All of the code is linted with ESLint and formatted with Prettier.

Naming

Use camelCase:
- when naming JavaScript / TypeScript functions.
- when naming JavaScript / TypeScript object keys.
- when naming local JavaScript / TypeScript constants and variables.
- when naming React hooks.
Use CONSTANT_CASE / MACRO_CASE / SCREAMING_SNAKE_CASE / UPPER_CASE:
- when naming environment variables.
- when naming GitHub specific documentation files.
- when naming global JavaScript / TypeScript constants.
Use dash-case / hyphen-case / kebab-case / lisp-case / spinal-case:
- in className and id attributes.
- in HTML, CSS and SCSS languages.
- when naming a folder or a file, unless the file requires different naming convention.
- when naming a new git branch.
- when naming keys in translation namespace files.
Use PascalCase:
- when naming a class, an interface or a type in TypeScript.
- when naming React components.

Components

Use functional components with arrow function syntax.

❌ INCORRECT

export type ExampleProps = {
  message: string;
};

export class Example extends React.Component<ExampleProps> {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

❌ INCORRECT

export type ExampleProps = {
  message: string;
};

export function Example({ message }: ExampleProps) {
  return <h1>{message}</h1>;
}

✔️ CORRECT

import type { Component } from "@/types";

export type ExampleProps = {
  message: string;
};

export const Example: Component<ExampleProps> = ({ message }) => {
  return <h1>{message}</h1>;
};

Use custom Component and Page types to type props for components and pages respectively.

❌ INCORRECT

export type MenuItemProps = {
  href: string;
  title: string;
};

export const MenuItem = ({ href, title }: MenuItemProps) => {
  return <Link href={href}>{title}</Link>;
};

❌ INCORRECT

export type BlogPageProps = {
  posts: Post[];
};

export const BlogPage = ({ posts }: BlogPageProps) => {
  return posts.map((post) => <Post post={post} />);
};

✔️ CORRECT

import type { Component } from "@/types";

export type MenuItemProps = {
  href: string;
  title: string;
};

export const MenuItem: Component<MenuItemProps> = ({ href, title }) => {
  return <Link href={href}>{title}</Link>;
};

✔️ CORRECT

import type { Page } from "@/types";

export type BlogPageProps = {
  posts: Post[];
};

export const BlogPage: Page<BlogPageProps> = ({ posts }) => {
  return posts.map((post) => <Post post={post} />);
};

Imports

Prefer absolute path import unless it makes more sense to use relative paths.

❌ INCORRECT

import { Button } from "../../components/button";
import type { CardType } from "./types";

✔️ CORRECT

import { Button } from "@/components/button";
import type { CardType } from "./types";

Prefer named export unless default export is required.

❌ INCORRECT

const Component = (props: ComponentProps) => <div></div>;

export default Component;

✔️ CORRECT

export const Component = (props: ComponentProps) => <div></div>;

✔️ CORRECT

import { Homepage } from "@/modules/home";

export default Homepage;

Translations

Don't hard code strings displayed to user. Extract them to appropriate namespace in /src/locales directory instead.

❌ INCORRECT

export const Component = () => {
  return <div>Hello world!</div>;
};

✔️ CORRECT

const en: BaseTranslation = {
  helloWorld: "Hello world!",
};

const pl: Translation = {
  helloWorld: "Witaj świecie!",
};

import { useI18nContext } from "@/modules/i18n";

export const Component: Component = () => {
  const { LL } = useI18nContext();

  return <div>{LL.helloWorld()}</div>;
};

Types

Use type when defining an intersection or union.

✔️ CORRECT

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

✔️ CORRECT

type Fruit = "apple" | "pear" | "orange";
type Nullish = null | undefined;
type Num = bigint | number;

Use type when defining function types.

❌ INCORRECT

interface Sum {
  (x: number, y: number): number;
}

✔️ CORRECT

type Sum = (x: number, y: number) => number;

Use type when defining React component props.

❌ INCORRECT

interface ExampleProps {
  children: ReactNode;
  title: string;
}

✔️ CORRECT

type ExampleProps = {
  children: ReactNode;
  title: string;
};

Use type when defining tuple types.

✔️ CORRECT

type ExampleTuple = [boolean, number, string];

Use interface for all object types where using type is not required.

❌ INCORRECT

type User = {
  age: number;
  authenticated: boolean;
  name: string;
};

✔️ CORRECT

interface User {
  age: number;
  authenticated: boolean;
  name: string;
}

Git

Start branch names, commit messages and pull request titles with applicable type.
- build - when making changes affecting build system or external dependencies
- chore - when changing code that doesn't affect production
- docs - when writing documentation
- feat - when adding a new feature
- fix - when fixing a bug
- perf - when improving performance
- refactor - when changing production code
- style - when improving the format / structure of the code
- test - when adding tests

Git Branch Names

Follow the format below when naming a branch.

<branch-type>/<branch-name>

Examples:

chore/issue-templates
feat/button-component
fix/homepage-overflow

Git Commit Messages

Adhere to Conventional Commits specification.

❌ INCORRECT
```
add feature
```
✔️ CORRECT
```
feat: add feature
```
Use the present tense.

❌ INCORRECT
```
feat: added feature
```
✔️ CORRECT
```
feat: add feature
```
Use the imperative mood.

❌ INCORRECT
```
fix: changes feature
```
✔️ CORRECT
```
fix: change feature
```
Reference pull requests liberally after the first line of merge commit message.

❌ INCORRECT
```
perf: use `priority` on images detected as LCP
```
✔️ CORRECT
```
perf: use `priority` on images detected as LCP (#47)
```
Limit the first line to 72 characters or less.

Attribution

These contribution guidelines are inspired by Atom's awesome CONTRIBUTING.md file.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CONTRIBUTING.md

CONTRIBUTING.md

Contributing to Studentre

Code of Conduct

Possible Ways of Contributing

Reporting Bugs

Suggesting Enhancements

Contributing Code

Prerequisites

Styleguides

Code

Naming

Components

Imports

Translations

Types

Git

Git Branch Names

Git Commit Messages

Attribution

Files

CONTRIBUTING.md

Latest commit

History

CONTRIBUTING.md

File metadata and controls

Contributing to Studentre

Code of Conduct

Possible Ways of Contributing

Reporting Bugs

Suggesting Enhancements

Contributing Code

Prerequisites

Styleguides

Code

Naming

Components

Imports

Translations

Types

Git

Git Branch Names

Git Commit Messages

Attribution