Code guidelines
Guidelines for contributing to Animata.
Component Generation
Use yarn animata:new for creating new components. This command will add some default files. More details can be found in the contributing components documentation.
File Naming
All file names should use lower kebab-case.
Image Usage
- Use Unsplash for images.
- Use radix icon or lucide icon for icons.
- If you need specific SVGs, use svgrepo.com and copy the SVG. Make sure to add the credits in the documentation for the icon.
Imports
All imports should be absolute, i.e., use @/... instead of relative imports like ./ or ../. If you are using VSCode, we have this setup by default.
"use client" Directive
If you are using React hooks, make sure to add the use client directive at the top level of your component file.
Plugins
Install Tailwind's VSCode plugin for a better development experience. If you are using VSCode, we have added recommended extensions in the .vscode/extensions.json file.
Event Handlers
If you are taking an event handler as a prop, make sure to use the onXXX naming convention. For example, if you are passing an onClick event to a button, give it a sensible name like onLikeButtonPress.
Default Props
Make sure to use reasonable defaults in the props. The component should render something by default.
Conditional Classes
Use cn for writing conditional classes. For example:
cn({
visible: shouldShow,
invisible: !shouldShow,
});Responsiveness
Ensure that the components are responsive and look good at different sizes.
Helper Functions
Move helper functions out of the component. Do not write all the helper logic inside the render function. You can and should move them out of the component.
Breaking Down Logic
You can break down the logic into smaller hooks/components and compose them. Feel free to create custom hooks and smaller components, but make sure they are all in a single file.
Opacity and Fractional Properties
You can change the opacity of colors by using the opacity syntax, e.g., text-green-500/10. Also, you can use fractional height, width, and position properties like h-1/2 for 50% height, w-1/3 for 33% width, top-1/4 for 25% top, etc.
Color Usage
Do not use custom colors unless needed. Tailwind already provides a wide range of colors which we can use.
PR review
Make sure to self-review the PRs thoroughly before submitting them. Check for any linting errors, console logs, and unnecessary code.
PR description
Add a detailed description of the changes you have made in the PR. It should be clear and concise.
Labels
If the component requires interaction from user like hover or click then add the requires interaction label to the component followed by click or hover whichever is applicable in the metadata section.
Available labels:
requires interaction- If the component requires user interaction.click: If the component requires click interaction.hover: If the component requires hover interaction.requires config: If the component requires tailwind configuration to work properly.
For example:
---
labels: ["requires interaction", "click"]
---