Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions documentation/Code style guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# `@shopify/polaris` Code Style Guide

## Introduction

The `@shopify/polaris` code style guide provides guidelines and best practices for writing consistent and maintainable code in the `@shopify/polaris` React component library. Adhering to this guide will help ensure code readability, consistency, and collaboration among developers. These guidelines are for items that are not enforced by automated tools like prettier, eslint, or stylelint-polaris

## Table of Contents

1. [Naming Conventions](#naming-conventions)
1. [Control Structures and Flow](#control-structures-and-flow)
1. [Error Handling](#error-handling)
1. [Code Organization and Structure]1#code-organization-and-structure)
1. [Examples and Code Snippets](#examples-and-code-snippets)

## Naming Conventions

- Use camel case for variable and function names.
- Use Pascal case for component names.
- Use Kebab case for props with a predefined list of strings.
- Use descriptive and meaningful names that accurately represent the purpose of the variable, function, or component.

## Control Structures and Flow

- Use early returns or guard clauses to handle exceptional cases and reduce nesting.

## Error Handling

- Use `try-catch` blocks to handle exceptions and errors.
- Provide meaningful error messages that help developers understand the issue.
- Log errors appropriately for debugging and troubleshooting purposes.

## Code Organization and Structure

- Organize code files and directories logically and consistently.
- Use meaningful and descriptive file and directory names.
- Follow the recommended folder structure for components, utilities, and tests.
- Import modules and components in alphabetical order.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do already use the ESLint import/order rule, which looks like it has an option for alphabetizing. Can we should enable this and remove this point?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm all for it

- Group related functions and variables together within a file.
- Include [JSDoc tags](https://jsdoc.app/) to describe default prop values

## Examples and Code Snippets

- Include examples and code snippets in the documentation to demonstrate usage and best practices.
- Provide clear and concise code examples that highlight the recommended coding style and patterns.