docs: create some documents needed for open source project (#6)

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,83 @@
+# Code of Conduct
+
+<!--
+For those who are viewing the current markdown file using:
+ – VSCode: Press F1 or Cmd/Ctrl+Shift+P and enter ">Markdown: Open Preview". Please install the "markdownlint" and "Markdown All in One" extensions.
+ – GitHub: Does this .md file appear different from what you are used to seeing on GitHub? Ensure the URL does not end with "?plain=1".
+-->
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participating in our project and community a harassment-free experience for everyone, regardless of individual differences.
+
+We commit to creating a friendly and respectful place for learning, teaching, and contributing. All participants in our community are expected to show respect and courtesy to others.
+
+## Our Standards
+
+**Positive Behaviors to Encourage:**
+
+- Demonstrating empathy and kindness
+- Being respectful of varying opinions and viewpoints
+- Giving and receiving constructive feedback
+- Owning up to our mistakes and learning from them
+- Prioritizing community well-being and success
+
+**Unacceptable Behaviors Include:**
+
+- Use of sexualized language or imagery, and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing private information without consent
+- Inappropriate private contact without consent
+- Other conduct deemed unprofessional in a community setting
+
+## Enforcement Responsibilities
+
+Our community leaders are tasked with clarifying these standards and enforcing them, taking fair and appropriate action to address any instances of unacceptable behavior.
+
+Leaders have the authority to moderate comments, commits, code, and other contributions not in line with this Code of Conduct.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and also when an individual is representing the project or its community in public spaces.
+
+## Enforcement Process
+
+Inappropriate behavior can be reported to community leaders at <[email protected]>. All complaints will be reviewed and investigated and will result in a response deemed necessary and appropriate to the circumstances.
+
+## Enforcement Guidelines
+
+Leaders will follow these guidelines in determining consequences:
+
+### 1. Correction
+
+**Impact**: Inappropriate language or behavior.
+
+**Consequence**: Private warning and clarity on why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Impact**: A single or series of violations.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with those involved for a set period, including community and external channels. Continued violation may lead to a ban.
+
+### 3. Temporary Ban
+
+**Impact**: Serious or sustained inappropriate behavior.
+
+**Consequence**: Temporary ban from interaction or public communication with the community. No interaction with those involved is allowed. Further violation may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Impact**: Pattern of serious violations.
+
+**Consequence**: Permanent ban from public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant and Mozilla's code of conduct enforcement ladder.
+
+- [Contributor Covenant](https://contributor-covenant.org/version/2/0/code_of_conduct.html)
+- [Mozilla's Enforcement Ladder](https://github.com/mozilla/diversity)
+
+For FAQs and translations, visit [Contributor Covenant FAQ](https://contributor-covenant.org/faq) and [Translations](https://contributor-covenant.org/translations).

.github/CONTRIBUTING.md

@@ -0,0 +1,66 @@
+# Contributing to React Interactive Paycard
+
+First off, thank you for considering contributing to React Interactive Paycard! It's people like you that make this project a success.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+If you find a bug, please [open an issue](https://github.com/MinhOmega/react-interactive-paycard/issues) and describe the problem in detail. If possible, please include:
+
+- Steps to reproduce the bug
+- A clear and descriptive title
+- Screenshots or GIFs
+- Expected and actual behavior
+
+### Suggesting Features
+
+If you have an idea for a new feature, please [open an issue](https://github.com/MinhOmega/react-interactive-paycard/issues) and describe your idea in detail. Make sure to include:
+
+- The problem your feature would solve
+- A detailed explanation of the proposed feature
+- Any potential drawbacks or risks
+
+### Code Contributions
+
+We love code contributions! If you want to fix a bug, add a feature, or improve the codebase, here's how to get started:
+
+1. **Fork the repository**: Click the "Fork" button on the top right corner of this repository.
+2. **Clone your fork**: 
+    ```bash
+    git clone https://github.com/MinhOmega/react-interactive-paycard.git
+    ```
+3. **Create a new branch**: 
+    ```bash
+    git checkout -b feature-branch
+    ```
+4. **Make your changes**: Implement your feature or bug fix.
+5. **Commit your changes**: 
+    ```bash
+    git commit -m "your commit message here"
+    ```
+6. **Push to your branch**: 
+    ```bash
+    git push origin feature-branch
+    ```
+7. **Open a Pull Request**: Go to your fork on GitHub and click the "New pull request" button.
+
+### Code Style
+
+Please follow the existing code style when contributing to this project:
+
+- Use TypeScript for type safety.
+- Ensure your code is well-documented.
+- Use descriptive commit messages.
+
+### Testing
+
+Before submitting your changes, please make sure to test your code thoroughly. If possible, write unit tests to cover new functionality.
+
+### License
+
+By contributing to React Interactive Paycard, you agree that your contributions will be licensed under the MIT License.
+
+## Code of Conduct
+
+Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project, you agree to abide by its terms.

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -0,0 +1,38 @@
+name: Bug Report
+description: Create a bug report to help us improve
+title: "bug: "
+labels:
+  - bug
+body:
+  - type: textarea
+    attributes:
+      label: Provide environment information
+      description: |
+        Run this command in the project root and paste the results in a code block:
+        ```bash
+        pnpm system
+        ```
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of the bug, as well as what you expected to happen when encountering it.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Link to reproduction
+      description: Please provide a link to a reproduction of the bug. Issues without a reproduction repo may be ignored.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: To reproduce
+      description: Describe how to reproduce the bug. Steps, code snippets, reproduction repos etc.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: Add any other information related to the bug here, screenshots if applicable.

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml

@@ -0,0 +1,26 @@
+name: Feature Request
+description: Create a feature request for the core packages
+title: "feat: "
+labels:
+  - enhancement
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to file a feature request. Please fill out this form as completely as possible.
+  - type: textarea
+    attributes:
+      label: Describe the feature you'd like to request
+      description: Please describe the feature as clear and concise as possible. Remember to add context as to why you believe this feature is needed.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like to see
+      description: Please describe the solution you would like to see. Adding example usage is a good way to provide context.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: Add any other information related to the feature here. If the feature request is related to any issues or discussions, link them here.

.github/TEMPLATE.md

@@ -0,0 +1,44 @@
+# Pull Request Template
+
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+Fixes # (issue)
+
+## Type of change
+
+Please delete options that are not relevant.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+## How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Also, list any relevant details for your test configuration.
+
+- [ ] Test A
+- [ ] Test B
+
+**Test Configuration**:
+* Firmware version:
+* Hardware:
+* Toolchain:
+* SDK:
+
+## Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented on my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules
+
+## Screenshots (if applicable)
+
+Please add any screenshots that may help explain your changes.

.github/funding.yml

@@ -0,0 +1 @@
+github: blefnk

README.md

@@ -1 +1,50 @@
-# React Interactive Paycard
+<h1 align="center">
+  React Interactive Paycard
+</h1>
+
+Inspired by the [vue-interactive-paycard](https://github.com/muhammederdem/vue-interactive-paycard) and [react-interactive-paycard](https://github.com/jasminmif/react-interactive-paycard) projects, I decided to recreate the same functionality in ReactJS, using TypeScript throughout. Additionally, I developed an example website to demonstrate how it works within a NextJS framework.
+
+
+<p align="center">
+  <strong>
+    <a href="https://minhomega.github.io/react-interactive-paycard/" target="_blank">Live code demo</a> |
+    <a href="https://github.com/minhomega/" target="_blank">Hire me here</a>
+  </strong>
+</p>
+
+## Demo
+
+<p align="center">
+  <img src="https://github.com/user-attachments/assets/abe85281-8e03-4918-a188-9cea73b99912">
+</p>
+
+## Notes
+
+- The component is only available in a browser environment. If you are using Next.js App Router or any other framework that utilizes Server Components, make sure to use this component within a Client Component by adding the directive [`use client`](https://react.dev/reference/rsc/use-client).
+
+## Roadmap
+
+- [x] Convert all code to TypeScript
+- [x] Create an example website and build the CI/CD pipeline to deploy it to GitHub Pages
+- [ ] Refactor the code to use custom props for easier integration
+- [ ] Add more card types and a prop to control validation
+- [ ] Publish it as an NPM package and build the CI/CD pipeline for NPM publishing
+
+## Contributing
+
+Contributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a pull request.
+
+1. Fork the repository
+2. Create a new branch (`git checkout -b feature-branch`)
+3. Make your changes
+4. Commit your changes (`git commit -m 'Add some feature'`)
+5. Push to the branch (`git push origin feature-branch`)
+6. Open a pull request
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
+
+## Contact
+
+For any questions or inquiries, feel free to reach out via [GitHub](https://github.com/minhomega/) or [email](mailto:[email protected]).