Skip to content

Latest commit

 

History

History
134 lines (96 loc) · 4.63 KB

CONTRIBUTING.md

File metadata and controls

134 lines (96 loc) · 4.63 KB

Contribution Guide

ui.crossplatformkorea.com

To contribute to this repository, you should have a basic understanding of the following technologies (expertise is not required):

  1. React Native
  2. Expo
  3. vscode
    • We use vscode as our IDE. Please install the eslint plugin.
  4. emotion

Things to Keep in Mind

Only components in the main directory are published to npm. These are the components intended for production use. When creating new components, please ensure you write test code for them. Add stories to the same directory (e.g., component.stories.tsx) to showcase components. This allows users to easily view a demo of all components at a glance.

How to Contribute

Installation

  1. Fork this project.

    • It is recommended to keep the main branch of your fork updated with the upstream repository.
    • Configure Syncing a Fork:
      • git remote add upstream https://github.com/crossplatformkorea/cpk-ui
      • Verify with git remote -v
    • Fetch branches from the upstream repository: git fetch upstream
    • Create a new branch before submitting a PR: git checkout -b [feature_name]
      • Before pushing the PR, fetch updates from the main branch: git fetch upstream and rebase: git rebase main
      • Check your status with: git log --decorate --oneline --all --graph

  2. Clone your forked repository:

    git clone https://github.com/<your-github-username>/cpk-ui.git

  3. Install dependencies:

    yarn

  4. Run the project:

    1. Start Metro Bundler

      yarn start

    2. Run on iOS / Android / Web Use Expo Dev Tools to run on all three platforms.

      If you encounter the error We ran "xcodebuild" command but it exited with error code 65 on your first run, follow this guide to install CocoaPods.

  5. Configure linting correctly in vscode:

  6. While implementing components, run yarn watch to dynamically build TypeScript files.

Commit Messages

A commit message should include a title, summary, and a test plan.

  • Title: Write in the imperative mood and add a tag ([android], [video], etc.) to indicate the affected code.
  • Summary: Explain why the commit is needed and how it addresses the issue. Include details not apparent from the code itself.
  • Test Plan: Describe how to verify that the changes work. This helps others write test plans for related areas in the future.

Refer to How to Write a Git Commit Message for more guidance.

Coding Guidelines

Follow hyochan/style-guide.

  1. Do not expose individual style attributes as props.

    Recommended:

    <Button textStyle={textStyle} />

    Not Recommended:

    <Button textColor={textColor} />

    Exposing single style attributes leads to cluttered and unmaintainable components.

  2. Expose all style props in a styles object and use style for the parent component’s style:

    type Styles = {
  container?: StyleProp<ViewStyle>;
  text?: StyleProp<TextStyle>;
  disabledButton?: StyleProp<ViewStyle>;
  disabledText?: StyleProp<TextStyle>;
  hovered?: StyleProp<ViewStyle>;
};

  3. Provide React elements for greater flexibility in components:

    <Checkbox
  startElement={<StyledText>Checkbox Example</StyledText>}
/>

  4. Keep components compact and expose extensibility with render functions:

    renderTitle={(item) => <Title>{item}</Title>}

  5. Provide default colors for each theme (light and dark):

    color: ${({theme}) => theme.textContrast};

Naming Conventions

  • testID: Use kebab-case (e.g., testID="my-test-id")
  • Class names: Use PascalCase
  • Enums: Use PascalCase
  • Constants: Use UPPER_SNAKE_CASE
  • Variables and functions: Use camelCase
  • Asset file names: Use lower_snake_case

Do not modify unrelated code to match these conventions.

By following these conventions, we ensure a consistent and maintainable codebase.