|
| 1 | +# `@shopify/polaris` Code Style Guide |
| 2 | + |
| 3 | +## Introduction |
| 4 | + |
| 5 | +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 |
| 6 | + |
| 7 | +## Table of Contents |
| 8 | + |
| 9 | +1. [Naming Conventions](#naming-conventions) |
| 10 | +1. [Control Structures and Flow](#control-structures-and-flow) |
| 11 | +1. [Error Handling](#error-handling) |
| 12 | +1. [Code Organization and Structure]1#code-organization-and-structure) |
| 13 | +1. [Examples and Code Snippets](#examples-and-code-snippets) |
| 14 | + |
| 15 | +## Naming Conventions |
| 16 | + |
| 17 | +- Use camel case for variable and function names. |
| 18 | +- Use Pascal case for component names. |
| 19 | +- Use Kebab case for props with a predefined list of strings. |
| 20 | +- Use descriptive and meaningful names that accurately represent the purpose of the variable, function, or component. |
| 21 | + |
| 22 | +## Control Structures and Flow |
| 23 | + |
| 24 | +- Use early returns or guard clauses to handle exceptional cases and reduce nesting. |
| 25 | + |
| 26 | +## Error Handling |
| 27 | + |
| 28 | +- Use `try-catch` blocks to handle exceptions and errors. |
| 29 | +- Provide meaningful error messages that help developers understand the issue. |
| 30 | +- Log errors appropriately for debugging and troubleshooting purposes. |
| 31 | + |
| 32 | +## Code Organization and Structure |
| 33 | + |
| 34 | +- Organize code files and directories logically and consistently. |
| 35 | +- Use meaningful and descriptive file and directory names. |
| 36 | +- Follow the recommended folder structure for components, utilities, and tests. |
| 37 | +- Import modules and components in alphabetical order. |
| 38 | +- Group related functions and variables together within a file. |
| 39 | +- Include [JSDoc tags](https://jsdoc.app/) to describe default prop values |
| 40 | + |
| 41 | +## Examples and Code Snippets |
| 42 | + |
| 43 | +- Include examples and code snippets in the documentation to demonstrate usage and best practices. |
| 44 | +- Provide clear and concise code examples that highlight the recommended coding style and patterns. |
0 commit comments