import { Meta } from '@storybook/blocks';

<Meta title="Contributing" />

<div className="custom-docs">
	## Contributing

    Building and maintinging a design system is a collaborative effort. We welcome contributions from all team members, regardless of their role or experience level. This document outlines the process for contributing to the DataHub Component Library.

    ### Development

    To run Storybook locally, use the following command:

    ```
    yarn storybook
    ```

    Storybook will start a local development server and open a new browser window with the Storybook interface on port `6006`. When developing new components or updating existing ones, you can use Storybook to preview your changes in real-time. This will ensure that the component looks and behaves as expected before merging your changes.

    ### Crafting New Components

    When creating new components, make sure to follow the established design patterns and coding standards. This will help maintain consistency across all DataHub products and make it easier for other team members to understand and use your components.

    Design new components with <strong>reusability in mind</strong>. Components should be flexible, extensible, and easy to customize. Avoid hardcoding values and use props to pass data and styles to your components. This will make it easier to reuse the component in different contexts and scenarios.

    Our design team works exclusively in Figma, so if questions arise about the design or implementation of a component, please refer to the Figma files for more information. If you have any questions or need clarification, feel free to reach out to the design team for assistance.

    ### Pull Requests

    When submitting a pull request, please follow these guidelines:

    1. Create a new branch for your changes.
    2. Make sure your code is well-documented and follows the established coding standards.
    3. Write clear and concise commit messages.
    4. Include a detailed description of the changes in your pull request.

    If applicable, include screenshots or GIFs to demonstrate the changes visually. This will help reviewers understand the context of your changes and provide more accurate feedback. If a Figma file exists, include a link to the file in the pull request description.

    ### Review Process

    All pull requests will be reviewed by the UI and design team to ensure that the changes align with the design system guidelines and best practices. The team will provide feedback and suggestions for improvement, and you may be asked to make additional changes before your pull request is merged.

</div>
