From 91215bfaadc6466a74615e7e27ef380b9df71085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=B5=20Ng=E1=BB=8Dc=20Quang=20Minh?= <49482201+MinhOmega@users.noreply.github.com> Date: Fri, 9 Aug 2024 17:44:15 +0700 Subject: [PATCH] docs: create some documents needed for open source project (#6) --- .github/CODE_OF_CONDUCT.md | 83 ++++++++++++++++++++++ .github/CONTRIBUTING.md | 66 +++++++++++++++++ .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 38 ++++++++++ .github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml | 26 +++++++ .github/TEMPLATE.md | 44 ++++++++++++ .github/funding.yml | 1 + README.md | 51 ++++++++++++- package-lock.json | 49 +++++++++++++ package.json | 1 + src/card.tsx | 10 --- 10 files changed, 358 insertions(+), 11 deletions(-) create mode 100644 .github/CODE_OF_CONDUCT.md create mode 100644 .github/CONTRIBUTING.md create mode 100644 .github/ISSUE_TEMPLATE/BUG_REPORT.yml create mode 100644 .github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml create mode 100644 .github/TEMPLATE.md create mode 100644 .github/funding.yml diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..1455655 --- /dev/null +++ b/.github/CODE_OF_CONDUCT.md @@ -0,0 +1,83 @@ +# Code of Conduct + + + +## 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 . 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). \ No newline at end of file diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..da1bf87 --- /dev/null +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml new file mode 100644 index 0000000..461e2f6 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml new file mode 100644 index 0000000..83548ae --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/.github/TEMPLATE.md b/.github/TEMPLATE.md new file mode 100644 index 0000000..8b900ca --- /dev/null +++ b/.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. diff --git a/.github/funding.yml b/.github/funding.yml new file mode 100644 index 0000000..a3772cb --- /dev/null +++ b/.github/funding.yml @@ -0,0 +1 @@ +github: blefnk \ No newline at end of file diff --git a/README.md b/README.md index b909352..ec8a96f 100644 --- a/README.md +++ b/README.md @@ -1 +1,50 @@ -# React Interactive Paycard \ No newline at end of file +

+ React Interactive Paycard +

+ +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. + + +

+ + Live code demo | + Hire me here + +

+ +## Demo + +

+ +

+ +## 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:vnqminh0502@gmail.com). \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0e13bac..9f2756a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "autoprefixer": "^10.4.20", "eslint": "^9.8.0", "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "postcss": "^8.4.41", "postcss-cli": "^11.0.0", "prettier": "^3.3.3", @@ -1703,6 +1704,36 @@ "eslint": ">=7.0.0" } }, + "node_modules/eslint-plugin-prettier": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.9.1" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" + }, + "peerDependencies": { + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" + }, + "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/eslint-scope": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz", @@ -1980,6 +2011,12 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "dev": true + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -3315,6 +3352,18 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/prettier-plugin-packagejson": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/prettier-plugin-packagejson/-/prettier-plugin-packagejson-2.5.1.tgz", diff --git a/package.json b/package.json index b4cd4b1..afe0016 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "autoprefixer": "^10.4.20", "eslint": "^9.8.0", "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "postcss": "^8.4.41", "postcss-cli": "^11.0.0", "prettier": "^3.3.3", diff --git a/src/card.tsx b/src/card.tsx index c2404de..bcbe373 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -96,16 +96,6 @@ const CreditCard: React.FC = ({ const cardType = (cardNumber: string): CardType => { const number = cardNumber let re: RegExp - const CARDS: Record = { - amex: '^3[47][0-9]{13}$', - diners: '^3(?:0[0-5]|[68][0-9])[0-9]{11}$', - discover: '^6(?:011|5[0-9]{2})[0-9]{12}$', - mastercard: '^5[1-5][0-9]{14}$', - troy: '^9792[0-9]{12}$', - unionpay: '^62[0-9]{14,17}$', - visa: '^4[0-9]{12}(?:[0-9]{3})?$', - } - for (const [card, pattern] of Object.entries(CARDS)) { re = new RegExp(pattern) if (number.match(re) !== null) {