├── .editorconfig ├── .env.example ├── .eslintignore ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── pull_request_template.md └── workflows │ ├── CheckPullRequest.yml │ └── Deploy.yml ├── .gitignore ├── .husky ├── pre-commit └── pre-push ├── .huskyrc ├── .npmrc ├── .nvmrc ├── .nxignore ├── .prettierignore ├── .prettierrc.js ├── .stylelintrc.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── apps └── main │ ├── .env.example │ ├── .eslintrc.json │ ├── .stylelintrc.json │ ├── index.html │ ├── package.json │ ├── postcss.config.cjs │ ├── project.json │ ├── src │ ├── App.module.css │ ├── App.tsx │ ├── GithubApp │ │ ├── GithubApp.tsx │ │ ├── componets │ │ │ ├── Header │ │ │ │ ├── Header.module.css │ │ │ │ ├── Header.tsx │ │ │ │ ├── Header.types.ts │ │ │ │ ├── LicenseSelect │ │ │ │ │ ├── LicenseSelect.tsx │ │ │ │ │ ├── LicenseSelect.types.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── Header.spec.tsx │ │ │ │ │ └── mocks │ │ │ │ │ │ └── result.success.json │ │ │ │ └── index.ts │ │ │ └── RepositoriesTable │ │ │ │ ├── RepositoriesTable.tsx │ │ │ │ ├── RepositoriesTable.types.ts │ │ │ │ ├── __tests__ │ │ │ │ ├── RepositoriesTable.spec.tsx │ │ │ │ └── mocks │ │ │ │ │ ├── empty.success.json │ │ │ │ │ └── result.success.json │ │ │ │ ├── index.ts │ │ │ │ └── utils │ │ │ │ └── index.ts │ │ ├── hooks │ │ │ └── useInputTokenForGraphql.ts │ │ ├── index.ts │ │ ├── providers │ │ │ └── ApolloProviderWrapper.tsx │ │ └── utils │ │ │ ├── __tests__ │ │ │ ├── getDateCondition.spec.ts │ │ │ ├── getLanguageCondition.spec.ts │ │ │ ├── getLicenseCondition.spec.ts │ │ │ ├── getRepositoryNameCondition.spec.ts │ │ │ └── getSortCondition.spec.ts │ │ │ ├── getDateCondition.ts │ │ │ ├── getLanguageCondition.ts │ │ │ ├── getLicenseCondition.ts │ │ │ ├── getRepositoryNameCondition.ts │ │ │ ├── getSortCondition.ts │ │ │ └── index.ts │ ├── declarations.d.ts │ ├── favicon.svg │ └── index.tsx │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ ├── vite.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── browserslist ├── docs ├── app_screenshot_1.png ├── app_screenshot_2.png └── app_screenshot_3.png ├── global.d.ts ├── nx.json ├── package-lock.json ├── package.json ├── packages ├── graphql │ ├── .env.example │ ├── .eslintrc.json │ ├── codegen.yml │ ├── graphql.config.yml │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ └── lib │ │ │ ├── generated │ │ │ ├── fragment-matcher.ts │ │ │ ├── generated.tsx │ │ │ └── schema.graphql │ │ │ └── graphql │ │ │ ├── ListLicenses.graphql │ │ │ └── ListRepositories.graphql │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── icons │ ├── .eslintrc.json │ ├── .svgrrc │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── Favicon.tsx │ │ │ └── index.ts │ │ ├── icons │ │ │ └── favicon.svg │ │ └── index.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json └── ui-kit │ ├── .eslintrc.json │ ├── .storybook │ ├── .eslintrc.json │ ├── main.ts │ └── preview.tsx │ ├── .stylelintrc.json │ ├── README.md │ ├── cypress.config.ts │ ├── cypress.d.ts │ ├── cypress │ ├── .eslintrc.json │ ├── fixtures │ │ └── example.json │ ├── support │ │ ├── commands.ts │ │ ├── component-index.html │ │ ├── component.tsx │ │ └── e2e.ts │ └── tsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── project.json │ ├── src │ ├── declarations.d.ts │ ├── index.ts │ ├── lib │ │ ├── Button │ │ │ ├── Button.stories.tsx │ │ │ ├── Button.tsx │ │ │ └── index.ts │ │ ├── ErrorBlock │ │ │ ├── ErrorBlock.cy.tsx │ │ │ ├── ErrorBlock.tsx │ │ │ ├── ErrorBlock.types.ts │ │ │ └── index.ts │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ └── index.ts │ │ ├── Loader │ │ │ ├── Loader.module.css │ │ │ ├── Loader.tsx │ │ │ ├── Loader.types.ts │ │ │ └── index.ts │ │ ├── Pagination │ │ │ ├── Pagination.tsx │ │ │ ├── Pagination.types.ts │ │ │ └── index.ts │ │ ├── Select │ │ │ ├── Select.tsx │ │ │ └── index.ts │ │ ├── Space │ │ │ ├── Space.tsx │ │ │ └── index.ts │ │ └── Table │ │ │ ├── Table.module.css │ │ │ ├── Table.tsx │ │ │ ├── Table.types.ts │ │ │ └── index.ts │ └── providers │ │ └── index.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ ├── tsconfig.storybook.json │ ├── vite.config.ts │ └── vitest.config.ts ├── tools └── tsconfig.tools.json ├── tsconfig.base.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | end_of_line = lf 11 | 12 | [*.md] 13 | max_line_length = off 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Nx 18 enables using plugins to infer targets by default 2 | # This is disabled for existing workspaces to maintain compatibility 3 | # For more info, see: https://nx.dev/concepts/inferred-tasks 4 | NX_ADD_PLUGINS=false 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .husky 4 | .idea 5 | coverage 6 | generated 7 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 13, 6 | "sourceType": "module", 7 | "ecmaFeatures": { 8 | "jsx": true, 9 | "modules": true, 10 | "experimentalObjectRestSpread": true 11 | } 12 | }, 13 | "ignorePatterns": ["**/*", "node_modules"], 14 | "plugins": ["@nx"], 15 | "settings": { 16 | "react": { 17 | "pragma": "React", 18 | "fragment": "Fragment", 19 | "version": "detect" 20 | }, 21 | "import/resolver": { 22 | "typescript": { 23 | "alwaysTryTypes": true 24 | } 25 | } 26 | }, 27 | "overrides": [ 28 | { 29 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 30 | "rules": { 31 | "@nx/enforce-module-boundaries": [ 32 | "error", 33 | { 34 | "enforceBuildableLibDependency": true, 35 | "allow": [], 36 | "depConstraints": [ 37 | { 38 | "sourceTag": "*", 39 | "onlyDependOnLibsWithTags": ["*"] 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | }, 46 | { 47 | "files": ["*.ts", "*.tsx"], 48 | "extends": ["plugin:nimbus-clean/recommended", "plugin:@nx/typescript"], 49 | "plugins": ["react-refresh"], 50 | "rules": { 51 | "react-refresh/only-export-components": "error", 52 | "no-extra-semi": "off", 53 | // https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/filename-case.md 54 | "unicorn/filename-case": [ 55 | "error", 56 | { 57 | "cases": { 58 | "pascalCase": true, 59 | "camelCase": true 60 | }, 61 | "ignore": [ 62 | "next-env.d.ts", 63 | "vite(st)?.config.ts", 64 | "vite-environment.d.ts", 65 | "\\.spec.ts(x)?", 66 | "\\.types.ts(x)?", 67 | "\\.stories.ts(x)?", 68 | "\\.styled.ts(x)?", 69 | "\\.styles.ts(x)?", 70 | "i18n-config.ts" 71 | ] 72 | } 73 | ] 74 | } 75 | }, 76 | { 77 | "files": ["*.graphql"], 78 | "extends": "plugin:@graphql-eslint/operations-all", 79 | "rules": { 80 | "@graphql-eslint/match-document-filename": [ 81 | "error", 82 | { 83 | "query": "PascalCase" 84 | } 85 | ] 86 | } 87 | } 88 | ], 89 | "env": { 90 | "es6": true, 91 | "browser": true, 92 | "node": true 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Please include a summary of the changes and the issue number (if applicable). Please also include relevant motivation and context. 4 | 5 | Fixes # (issue) 6 | 7 | ## Type of Change 8 | 9 | Please delete options that are not relevant. 10 | 11 | - [ ] Bug fix (non-breaking change which fixes an issue) 12 | - [ ] New feature (non-breaking change which adds functionality) 13 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 14 | - [ ] Documentation update 15 | 16 | ## Checklist 17 | 18 | - [ ] I have read the [contribution guidelines](CONTRIBUTING.md) 19 | - [ ] My code follows the code style of this project 20 | - [ ] I have performed a self-review of my own code 21 | - [ ] I have commented my code, particularly in hard-to-understand areas 22 | - [ ] I have made corresponding changes to the documentation 23 | - [ ] My changes generate no new warnings 24 | - [ ] I have added tests that prove my fix is effective or that my feature works 25 | - [ ] New and existing unit tests pass locally with my changes 26 | 27 | ## Screenshots (if applicable) 28 | 29 | You can attach screenshots here to visually represent your changes (e.g., UI changes). 30 | 31 | ## Additional Notes 32 | 33 | Add any additional notes or context about the pull request here. 34 | -------------------------------------------------------------------------------- /.github/workflows/CheckPullRequest.yml: -------------------------------------------------------------------------------- 1 | name: Code check 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | env: 8 | # Nx 18 enables using plugins to infer targets by default 9 | # This is disabled for existing workspaces to maintain compatibility 10 | # For more info, see: https://nx.dev/concepts/inferred-tasks 11 | NX_ADD_PLUGINS: false 12 | jobs: 13 | cache-and-install: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v4 17 | with: 18 | fetch-depth: 0 19 | 20 | - uses: actions/setup-node@v4 21 | with: 22 | node-version: 20.16.0 23 | cache: 'npm' 24 | cache-dependency-path: '**/package-lock.json' 25 | 26 | - name: Install dependencies 27 | run: npm ci --prefer-offline 28 | 29 | type-check: 30 | runs-on: ubuntu-latest 31 | needs: 32 | - cache-and-install 33 | steps: 34 | - uses: actions/checkout@v4 35 | with: 36 | fetch-depth: 0 37 | 38 | - uses: actions/setup-node@v4 39 | with: 40 | node-version: 20 41 | cache: 'npm' 42 | cache-dependency-path: '**/package-lock.json' 43 | 44 | - run: npm ci --prefer-offline 45 | - uses: nrwl/nx-set-shas@v4 46 | 47 | - name: type-check PR 48 | if: github.ref != 'refs/heads/main' 49 | run: npx nx affected --target=type-check --base=origin/main --head=HEAD 50 | - name: type-check Main 51 | if: github.ref == 'refs/heads/main' 52 | run: npx nx affected --target=type-check --base=origin/main~1 --head=origin/main 53 | 54 | lint: 55 | runs-on: ubuntu-latest 56 | needs: 57 | - cache-and-install 58 | steps: 59 | - uses: actions/checkout@v4 60 | with: 61 | fetch-depth: 0 62 | 63 | - uses: actions/setup-node@v4 64 | with: 65 | node-version: 20 66 | cache: 'npm' 67 | cache-dependency-path: '**/package-lock.json' 68 | 69 | - run: npm ci --prefer-offline 70 | - uses: nrwl/nx-set-shas@v4 71 | 72 | - name: lint PR 73 | if: github.ref != 'refs/heads/main' 74 | run: npx nx affected --target=lint --base=origin/main --head=HEAD 75 | - name: lint Main 76 | if: github.ref == 'refs/heads/main' 77 | run: npx nx affected --target=lint --base=origin/main~1 --head=origin/main 78 | 79 | stylelint: 80 | runs-on: ubuntu-latest 81 | needs: 82 | - cache-and-install 83 | steps: 84 | - uses: actions/checkout@v4 85 | with: 86 | fetch-depth: 0 87 | 88 | - uses: actions/setup-node@v4 89 | with: 90 | node-version: 20 91 | cache: 'npm' 92 | cache-dependency-path: '**/package-lock.json' 93 | 94 | - run: npm ci --prefer-offline 95 | - uses: nrwl/nx-set-shas@v4 96 | 97 | - name: stylelint PR 98 | if: github.ref != 'refs/heads/main' 99 | run: npx nx affected --target=stylelint --base=origin/main --head=HEAD 100 | - name: stylelint Main 101 | if: github.ref == 'refs/heads/main' 102 | run: npx nx affected --target=stylelint --base=origin/main~1 --head=origin/main 103 | 104 | test: 105 | runs-on: ubuntu-latest 106 | needs: 107 | - cache-and-install 108 | steps: 109 | - uses: actions/checkout@v4 110 | with: 111 | fetch-depth: 0 112 | 113 | - uses: actions/setup-node@v4 114 | with: 115 | node-version: 20 116 | cache: 'npm' 117 | cache-dependency-path: '**/package-lock.json' 118 | 119 | - run: npm ci --prefer-offline 120 | - uses: nrwl/nx-set-shas@v4 121 | 122 | - name: test PR 123 | if: github.ref != 'refs/heads/main' 124 | run: npx nx affected --target=test --base=origin/main --head=HEAD 125 | - name: test Main 126 | if: github.ref == 'refs/heads/main' 127 | run: npx nx affected --target=test --base=origin/main~1 --head=origin/main 128 | 129 | -------------------------------------------------------------------------------- /.github/workflows/Deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | on: 3 | workflow_run: 4 | workflows: ["Code check"] 5 | branches: [main] 6 | types: 7 | - completed 8 | env: 9 | VITE_GITHUB_API_ENDPOINT: https://api.github.com/graphql 10 | # Nx 18 enables using plugins to infer targets by default 11 | # This is disabled for existing workspaces to maintain compatibility 12 | # For more info, see: https://nx.dev/concepts/inferred-tasks 13 | NX_ADD_PLUGINS: false 14 | jobs: 15 | build-and-deploy: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v4 19 | with: 20 | fetch-depth: 0 21 | 22 | - uses: actions/setup-node@v4 23 | with: 24 | node-version: 20 25 | cache: 'npm' 26 | cache-dependency-path: '**/package-lock.json' 27 | 28 | - run: npm ci --prefer-offline 29 | 30 | - name: Install and Build 🔧 31 | run: npx nx build main 32 | 33 | - name: Deploy 🚀 34 | uses: JamesIves/github-pages-deploy-action@v4.3.0 35 | with: 36 | branch: gh-pages 37 | folder: apps/main/dist 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | stats.html 41 | .vscode 42 | node_modules 43 | coverage 44 | 45 | .env 46 | .env.* 47 | !.env.example 48 | 49 | .nx/cache 50 | .nx/workspace-data 51 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx nx affected --target=type-check --uncommitted=true && node_modules/.bin/lint-staged 5 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx nx affected --target=lint 5 | npx nx affected --target=type-check 6 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | # This loads nvm.sh, sets the correct PATH before running hook, and ensures the project version of Node 2 | export NVM_DIR="$HOME/.nvm" 3 | 4 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 5 | 6 | # If you have an .nvmrc file, we use the relevant node version 7 | if [ -f ".nvmrc" ]; then 8 | nvm use 9 | fi 10 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | legacy-peer-deps=true 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20.16.0 2 | -------------------------------------------------------------------------------- /.nxignore: -------------------------------------------------------------------------------- 1 | .vercel 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .assets 2 | .nx 3 | .idea 4 | .vscode 5 | .husky 6 | dist 7 | build 8 | coverage 9 | node_modules 10 | .vercel 11 | 12 | /.nx/cache 13 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 150, 3 | useTabs: false, 4 | tabWidth: 2, 5 | trailingComma: 'all', 6 | semi: false, 7 | singleQuote: true, 8 | } 9 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-css-modules" 5 | ], 6 | "rules": { 7 | "selector-class-pattern": null 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | Welcome to our project! We're thrilled that you're considering contributing. Here's a comprehensive guide to help you get started, tailored to the information you've provided: 4 | 5 | ## Getting Started 6 | 7 | 1. Fork the repository to your GitHub account. 8 | 2. Clone the forked repository to your local machine. 9 | 3. Run `npm install` to install the project dependencies. 10 | 4. Familiarize yourself with the project's structure and codebase. 11 | 12 | ## Branching 13 | 14 | 1. Create a new branch for your contribution: `git checkout -b feature/my-feature`. 15 | 2. Keep your branch up to date with the main branch: git pull origin main. 16 | 17 | ## Development 18 | 19 | 1. Before proceeding, read how to create a [GitHub access token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line). 20 | 2. To configure environment variables: 21 | - Copy `cp ./packages/graphql/env.example ./packages/graphql/.env.local` and add your GitHub token as indicated in step 1. 22 | - Copy `cp ./apps/main/env.example ./apps/main/.env.local` and add your GitHub token in the same way. 23 | 3. If needed, you can generate code from the GraphQL schema using: `npm run codegen:graphql` 24 | 4. To start the application: `npm run dev` 25 | 5. Open your browser and navigate to http://localhost:3000 to view the app. 26 | 27 | ## Committing 28 | 29 | 1. Craft descriptive and concise commit messages. 30 | 2. Write in the present tense, such as "Add feature" instead of "Added feature". 31 | 3. Link to related issues using keywords like "Fixes #123". 32 | 33 | ## Pull Requests 34 | 35 | 1. Push your changes to your forked repository. 36 | 2. Create a Pull Request (PR) from your branch to the main repository's main branch. 37 | 3. Provide a clear PR title and an explanatory description of your changes. 38 | 4. Reference relevant issues using keywords like "Closes #123". 39 | 40 | ## Issues 41 | 42 | 1. Should you come across a bug or have an idea, check for existing issues. If none exist, create one. 43 | 2. Utilize the provided issue template for comprehensive details. 44 | 3. Approach feedback and suggestions with a respectful and receptive attitude. 45 | 46 | Thank you for considering contributing to our project. Your dedication contributes to its growth and quality. Enjoy the collaborative journey! 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 dipiash 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![CI](https://github.com/dipiash/nx-vite-react-ts-mantine-boilerplate/actions/workflows/CheckPullRequest.yml/badge.svg?branch=main) 2 | [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fdipiash%2Fnx-vite-react-ts-mantine-boilerplate&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com) 3 | 4 | # NX monorepo boilerplate with React + Vite + TypeScript + Mantine 5 | 6 | ## Getting Started 7 | 8 | ### Prerequisites 9 | 10 | ```sh 11 | # Install NX 12 | npm install -g nx 13 | 14 | # Init project 15 | npm run init-project 16 | ``` 17 | 18 | ### Development 19 | 20 | 1. Read [how to create GitHub access token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) 21 | 2. Add `.env` into `./` 22 | ```bash 23 | cp ./env.example ./.env 24 | ``` 25 | 3. Add `.env.local` into `./packages/graphql/.env.local` 26 | ```bash 27 | cp ./packages/graphql/env.example ./packages/graphql/.env.local 28 | ``` 29 | and add your GitHub token (see step 1) 30 | 4. Add `.env.local` to `./apps/main/.env.local` 31 | ```bash 32 | cp ./apps/main/env.example ./apps/main/.env.local 33 | ``` 34 | and add your GitHub token (see step 1) 35 | 5. _[Optional step]_ Generate code from GraphQL schema 36 | ```sh 37 | npm run codegen:graphql 38 | ``` 39 | 6. Start the app 40 | ```sh 41 | npm run dev 42 | ``` 43 | and open the page http://localhost:3000/ 44 | 45 | ### Examples 46 | 47 | - [GitHub repository list](https://dipiash.github.io/nx-vite-react-ts-mantine-boilerplate/) 48 | 49 | ### App screenshots 50 | 51 | #### Desktop version 52 | 53 | app_screenshot_1.png 54 | 55 | app_screenshot_2.png 56 | 57 | #### Mobile version 58 | 59 | app_screenshot_3.png 60 | 61 | ### Features 62 | 63 | - [Nx 20](https://nx.dev) 64 | - [React 18](https://reactjs.org) 65 | - [Mantine 7](https://mantine.dev/) 66 | - [Storybook 7](https://storybook.js.org/) 67 | - [TypeScript](https://www.typescriptlang.org/) 68 | - [Vite 5](https://vitejs.dev/) 69 | - [Vitest](https://vitest.dev/) 70 | - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) 71 | - [Cypress](https://www.cypress.io) 72 | - [ESLint](https://eslint.org/) 73 | - HMR (Hot Module Replacement) 74 | 75 | ## License 76 | This code is licensed under the MIT License. 77 | You can find the license file [here](/LICENSE). 78 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | We prioritize the security of our project and value the contributions of the community. If you come across a security vulnerability within our repository, we encourage you to report it responsibly. Here's how you can do that: 4 | 5 | ## Reporting a Vulnerability 6 | 7 | To report a security vulnerability, please follow these steps: 8 | 1. Create a new issue in this repository to report the vulnerability. Use a clear and descriptive title to help us understand the issue. 9 | 2. Provide detailed steps to reproduce the vulnerability, along with any additional context you can provide. 10 | 3. Avoid sharing sensitive information or data when reporting the vulnerability. 11 | 4. Our team will review the issue and respond to it as soon as possible. 12 | -------------------------------------------------------------------------------- /apps/main/.env.example: -------------------------------------------------------------------------------- 1 | VITE_GITHUB_TOKEN=YOUR_GITHUB_TOKEN 2 | VITE_GITHUB_API_ENDPOINT=https://api.github.com/graphql 3 | -------------------------------------------------------------------------------- /apps/main/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*", "node_modules/**"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {}, 8 | "parserOptions": { 9 | "project": ["tsconfig.*?.json"] 10 | } 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /apps/main/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.stylelintrc.json"] 3 | } 4 | -------------------------------------------------------------------------------- /apps/main/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GitHub repositories list 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/main/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "type": "module" 4 | } 5 | -------------------------------------------------------------------------------- /apps/main/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-preset-mantine': {}, 4 | 'postcss-simple-vars': {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /apps/main/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "projectType": "application", 5 | "sourceRoot": "apps/main/src", 6 | "tags": [], 7 | "targets": { 8 | "type-check": { 9 | "executor": "nx:run-commands", 10 | "options": { 11 | "cwd": "./apps/main", 12 | "commands": [ 13 | { 14 | "command": "tsc --project tsconfig.app.json --noEmit && tsc --project tsconfig.spec.json --noEmit" 15 | } 16 | ] 17 | } 18 | }, 19 | "serve": { 20 | "executor": "nx:run-commands", 21 | "options": { 22 | "cwd": "./apps/main", 23 | "commands": [ 24 | { 25 | "command": "vite serve" 26 | } 27 | ] 28 | } 29 | }, 30 | "preview": { 31 | "executor": "nx:run-commands", 32 | "options": { 33 | "cwd": "./apps/main", 34 | "commands": [ 35 | { 36 | "command": "vite preview" 37 | } 38 | ] 39 | } 40 | }, 41 | "build": { 42 | "executor": "nx:run-commands", 43 | "options": { 44 | "cwd": "./apps/main", 45 | "commands": [ 46 | { 47 | "command": "vite build" 48 | } 49 | ] 50 | } 51 | }, 52 | "build-serve": { 53 | "executor": "nx:run-commands", 54 | "options": { 55 | "cwd": "./apps/main", 56 | "commands": [ 57 | { 58 | "command": "npx http-server dist" 59 | } 60 | ] 61 | } 62 | }, 63 | "lint": { 64 | "executor": "@nx/eslint:lint", 65 | "outputs": ["{options.outputFile}"] 66 | }, 67 | "stylelint": { 68 | "executor": "nx-stylelint:lint", 69 | "outputs": ["{options.outputFile}"], 70 | "options": { 71 | "lintFilePatterns": ["apps/main/src/**/*.{css}"] 72 | } 73 | }, 74 | "test": { 75 | "executor": "nx:run-commands", 76 | "options": { 77 | "cwd": "./apps/main", 78 | "commands": [ 79 | { 80 | "command": "vitest run --config ./vitest.config.ts --coverage --passWithNoTests" 81 | } 82 | ] 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /apps/main/src/App.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | padding: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /apps/main/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit' 2 | import React, { FC } from 'react' 3 | 4 | import { GithubApp } from './GithubApp' 5 | 6 | import '@mantine/core/styles.css' 7 | import classes from './App.module.css' 8 | 9 | const App: FC = () => ( 10 | 11 |
12 | 13 |
14 | 15 | ) 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /apps/main/src/GithubApp/GithubApp.tsx: -------------------------------------------------------------------------------- 1 | import { useForm } from '@mantine/form' 2 | import { useDebouncedValue } from '@mantine/hooks' 3 | import { Button } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit' 4 | import React from 'react' 5 | 6 | import { Header } from './componets/Header' 7 | import { RepositoriesTable } from './componets/RepositoriesTable' 8 | import { useInputTokenForGraphql } from './hooks/useInputTokenForGraphql' 9 | import { ApolloProviderWrapper } from './providers/ApolloProviderWrapper' 10 | import { getDateCondition, getLanguageCondition, getLicenseCondition, getRepositoryNameCondition, getSortCondition } from './utils' 11 | 12 | export const GithubApp = () => { 13 | const { isTokenExist, handleUpdateToken } = useInputTokenForGraphql() 14 | 15 | const form = useForm({ 16 | initialValues: { 17 | license: ' ', 18 | repositoryName: '', 19 | }, 20 | }) 21 | const license = form.values.license 22 | const repositoryNameValue = form.values.repositoryName 23 | 24 | const [repositoryName] = useDebouncedValue(repositoryNameValue, 300) 25 | 26 | const queryString = [ 27 | getSortCondition('stars', 'desc'), 28 | getLanguageCondition('JavaScript'), 29 | getDateCondition(), 30 | getLicenseCondition(license), 31 | getRepositoryNameCondition(repositoryName), 32 | ].join(' ') 33 | 34 | return ( 35 | 36 | 37 | 38 | {isTokenExist && ( 39 | <> 40 |
41 | 42 | 43 | )} 44 | 45 | ) 46 | } 47 | 48 | GithubApp.whyDidYouRender = true 49 | -------------------------------------------------------------------------------- /apps/main/src/GithubApp/componets/Header/Header.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | box-sizing: border-box; 4 | margin-bottom: 10px; 5 | border-bottom: 1px solid #eee; 6 | } 7 | 8 | .headerItem { 9 | flex: 1; 10 | flex-direction: column; 11 | } 12 | 13 | .headerItemLeft { 14 | padding-right: 5px; 15 | } 16 | 17 | .headerItemRight { 18 | padding-left: 5px; 19 | } 20 | 21 | .headerField { 22 | width: 100%; 23 | } 24 | 25 | @media screen and (width <= 640px) { 26 | .header { 27 | flex-direction: column; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/main/src/GithubApp/componets/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import { Input } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit' 2 | import cx from 'clsx' 3 | import React, { FC, memo } from 'react' 4 | 5 | import { HeaderPropertiesInterface } from './Header.types' 6 | import { LicenseSelect } from './LicenseSelect' 7 | 8 | import classes from './Header.module.css' 9 | 10 | export const Header: FC = memo(({ form }) => ( 11 |
12 |
13 | 21 |
22 |
23 | 24 |
25 |
26 | )) 27 | 28 | Header.displayName = 'Header' 29 | -------------------------------------------------------------------------------- /apps/main/src/GithubApp/componets/Header/Header.types.ts: -------------------------------------------------------------------------------- 1 | import { UseFormReturnType } from '@mantine/form' 2 | 3 | export interface HeaderPropertiesInterface { 4 | form: UseFormReturnType<{ 5 | license: string 6 | repositoryName: string 7 | }> 8 | } 9 | -------------------------------------------------------------------------------- /apps/main/src/GithubApp/componets/Header/LicenseSelect/LicenseSelect.tsx: -------------------------------------------------------------------------------- 1 | import { useListLicensesQuery } from '@nx-vite-react-ts-mantine-boilerplate/graphql' 2 | import { ComboboxItem, ErrorBlock, Loader, Select } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit' 3 | import React, { FC, useMemo } from 'react' 4 | 5 | import { LicenseSelectPropertiesInterface } from './LicenseSelect.types' 6 | 7 | const firstEmptyComboboxItem: ComboboxItem[] = [{ label: '--- Not Selected ---', value: ' ' }] 8 | 9 | export const LicenseSelect: FC = ({ ...rest }) => { 10 | const { data, error, loading } = useListLicensesQuery() 11 | 12 | const preparedLicenses = useMemo(() => { 13 | const preparedOriginalLicenses = 14 | data?.licenses 15 | .map((license) => 16 | license 17 | ? ({ 18 | label: license.name, 19 | value: license.key, 20 | } as ComboboxItem) 21 | : undefined, 22 | ) 23 | .filter((license): license is ComboboxItem => license !== undefined) || [] 24 | 25 | return [...firstEmptyComboboxItem, ...preparedOriginalLicenses] 26 | }, [data]) 27 | 28 | if (error) { 29 | return 30 | } 31 | 32 | return ( 33 | 34 |