This style guide outlines the conventions and best practices to follow when contributing code to Composable UI.
- All code should be written in English.
- Use two spaces for indentation.
- Use Unix line endings (
\n
) for text files and Windows line endings (\r\n
) for files that need to be compatible with Windows. - Use descriptive variable names and avoid abbreviations when possible.
- Avoid commenting out code. Instead, remove it or use version control to keep track of changes.
- Ensure there is no degradation of performance or accessibility by comparing LightHouse v10 score between your branch and the main branch
- Use PascalCase for type names.
- Use camelCase for variable and function names.
- Use
interface
for types, unlesstype
is required. - Use
const
for properties that should not be modified. - Use
unknown
instead ofany
when the type is not known. - Avoid using type assertions, unless required.
- Use
import
andexport
statements instead of CommonJS-stylerequire
. - Use
getStaticProps
andgetServerSideProps
for data fetching instead of making API calls in the client, when possible. - Use
useRouter
to access router information or navigational needs. - Use
NextLink
from the Next.jsnext/link
module for client-side navigation by passing it using theas
prop to the ChakraUILink
,Button
, etc component. More information - Use
next/image
module for optimizing images.
- Use the Chakra UI Theme to maintain your theme CSS values
- Group Chakra UI theme tokens into different files based on their type (typography, borders, colors, etc.)
- Use Chakra UI theme tokens to apply styles, instead of hardcoding CSS values directly in style props
- Use present tense for commit messages.
- Use imperative mood for commit messages.
- Keep each commit small and focused on a single change.
- Use meaningful commit messages that describe the change.
- All changes should be part of a branch and submitted as a pull request -branches should be prefixed with one of:
fix/
for bug fixesfeat/
for featuresdocs/
for documentation changes
- Rebase your feature branch onto the latest main branch before submitting a pull request.
- Use pull requests for code reviews.