diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c660702..0000000 --- a/.babelrc +++ /dev/null @@ -1,46 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react", - "@babel/preset-typescript", - ], - "plugins": [ - // Reuse babel's injected headers - "@babel/plugin-transform-runtime", - - // Handle absolute imports - ["babel-plugin-module-resolver", { - "root": ["."], - "extensions": [".js", ".jsx", ".ts", ".tsx"], - "alias": { - "#generated": "./generated", - "#components": "./app/components", - "#views": "./app/views", - "#resources": "./app/resources", - "#base": "./app/Base", - "#utils": ["./app/Base/utils"], - "#hooks": './app/hooks', - }, - }], - - // Extends javascript support - "@babel/plugin-syntax-dynamic-import", - "@babel/plugin-proposal-do-expressions", - - // Extends react support - "@babel/plugin-transform-react-constant-elements", - // "@babel/plugin-transform-react-inline-elements", - - // Extends graphql support - 'babel-plugin-graphql-tag', - - // NOTE: we may not need to install these as well - // Polyfill - ["polyfill-corejs3", { - "method": "usage-global", - }], - ["polyfill-regenerator", { - "method": "usage-global", - }], - ], -} diff --git a/.dockerignore b/.dockerignore index 11da7b5..8681cff 100644 --- a/.dockerignore +++ b/.dockerignore @@ -143,3 +143,7 @@ deploy/eb/ # tox ./.tox + +# Backend +backend +!backend/schema.graphql diff --git a/.env.example b/.env.example deleted file mode 100644 index e7b3c29..0000000 --- a/.env.example +++ /dev/null @@ -1,7 +0,0 @@ -REACT_APP_SENTRY_DSN= -REACT_APP_SENTRY_TRACES_SAMPLE_RATE= -REACT_APP_ENVIRONMENT= - -GRAPHQL_CODEGEN_ENDPOINT= -REACT_APP_GRAPHQL_ENDPOINT= -REACT_APP_MAPSWIPE_WEBSITE= diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 0d369ec..0000000 --- a/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -node_modules -build -generated -.* -*.test.js -*.test.ts -*.test.jsx -*.test.tsx diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 8838f28..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,123 +0,0 @@ -const config = { - extends: [ - 'airbnb', - 'airbnb/hooks', - 'plugin:postcss-modules/recommended', - 'plugin:@typescript-eslint/recommended', - ], - env: { - browser: true, - }, - plugins: [ - 'graphql', - '@typescript-eslint', - 'postcss-modules', - ], - settings: { - 'import/resolver': { - 'babel-module': {}, - }, - react: { - version: 'detect', - }, - 'postcss-modules': { - camelCase: 'camelCaseOnly', - }, - }, - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 2018, - ecmaFeatures: { - jsx: true, - }, - sourceType: 'module', - allowImportExportEverywhere: true, - }, - rules: { - strict: 1, - // 'default-param-last': 0, - - 'no-unused-vars': 0, - '@typescript-eslint/no-unused-vars': 1, - - 'no-use-before-define': 0, - '@typescript-eslint/no-use-before-define': 1, - - 'no-shadow': 0, - '@typescript-eslint/no-shadow': ['error'], - - '@typescript-eslint/no-empty-interface': 0, - '@typescript-eslint/explicit-function-return-type': 0, - '@typescript-eslint/explicit-module-boundary-types': 0, - - 'no-console': 1, - indent: ['error', 4, { SwitchCase: 1 }], - - 'prefer-destructuring': 'warn', - 'function-paren-newline': ['warn', 'consistent'], - 'object-curly-newline': [2, { - ObjectExpression: { consistent: true }, - ObjectPattern: { consistent: true }, - ImportDeclaration: { consistent: true }, - ExportDeclaration: { consistent: true }, - }], - - 'import/extensions': ['off', 'never'], - 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], - - 'jsx-a11y/anchor-is-valid': ['error', { - components: ['Link'], - specialLink: ['to'], - }], - 'jsx-a11y/label-has-for': 'warn', - - 'react/jsx-indent': [2, 4], - 'react/jsx-indent-props': [2, 4], - 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], - 'react/jsx-props-no-spreading': 0, - 'react/jsx-key': ['warn', { - checkFragmentShorthand: true, - checkKeyMustBeforeSpread: true, - }], - - 'react/prop-types': [1, { ignore: [], customValidators: [], skipUndeclared: false }], - 'react/forbid-prop-types': [1], - 'react/destructuring-assignment': [1, 'always', { ignoreClassFields: true }], - 'react/sort-comp': [1, { - order: [ - 'static-methods', - 'constructor', - 'lifecycle', - 'everything-else', - 'render', - ], - }], - 'react/no-unused-state': 'warn', - 'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }], - 'react/default-props-match-prop-types': ['warn', { - allowRequiredDefaults: true, - }], - - - 'react/function-component-definition': [2, { - 'namedComponents': 'function-declaration', - 'unnamedComponents': 'function-expression', - }], - 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn', - - 'postcss-modules/no-unused-class': 'warn', - 'postcss-modules/no-undef-class': 'warn', - }, -}; -try { - const introspectionSchema = require('./generated/schema.json'); - config.rules['graphql/template-strings'] = ['error', { - env: 'apollo', - schemaJson: introspectionSchema, - }]; -} catch (e) { - // do nothing here -} - -module.exports = config; diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b715b8f..e5e43c7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,27 +12,37 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@master + with: + submodules: true + + - name: Install pnpm + uses: pnpm/action-setup@v4 - - uses: actions/setup-node@v4 + - name: Install Node.js + uses: actions/setup-node@v4 with: - node-version: '17.x' - cache: 'yarn' + node-version: 20 + cache: 'pnpm' - - name: 🤞 Install dependencies 🧪 - run: yarn install --frozen-lockfile --prefer-offline + - name: Install dependencies + run: pnpm install + + - name: Generate typings + run: pnpm generate:type + env: + APP_GRAPHQL_CODEGEN_ENDPOINT: './backend/schema.graphql' - - name: 🤞 Run Lint 🧪 - run: yarn lint + - name: Lint CSS + run: pnpm lint:css - - name: 🤞 Run Test 🧪 - run: yarn test --passWithNoTests + - name: Lint JS + run: pnpm lint:js - - name: 🤞 Run Build 🧪 - run: yarn build + - name: Build + run: pnpm build env: - REACT_APP_SENTRY_DSN: 'https://random-token@sentry.io' - REACT_APP_SENTRY_TRACES_SAMPLE_RATE: 0.2 - REACT_APP_ENVIRONMENT: 'ci' - GRAPHQL_CODEGEN_ENDPOINT: 'https://random-domain.com/graphql/' - REACT_APP_GRAPHQL_ENDPOINT: 'https://random-domain.com/graphql/' - REACT_APP_MAPSWIPE_WEBSITE: 'https://random-website-domain.com' + APP_ENVIRONMENT: 'ci' + APP_SENTRY_DSN: 'https://random-token@sentry.io' + APP_GRAPHQL_CODEGEN_ENDPOINT: 'https://random-domain.com/graphql/' + APP_GRAPHQL_ENDPOINT: 'https://random-domain.com/graphql/' + APP_BACKEND_ENDPOINT: 'https://random-domain.com/' diff --git a/.github/workflows/publish-web-app-serve.yml b/.github/workflows/publish-web-app-serve.yml new file mode 100644 index 0000000..c596876 --- /dev/null +++ b/.github/workflows/publish-web-app-serve.yml @@ -0,0 +1,25 @@ +name: Publish web app serve + +on: + workflow_dispatch: + push: + branches: + - develop + - feature/add-web-app-serve + +permissions: + packages: write + +jobs: + publish_image: + name: Publish Docker Image + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + submodules: true + + - name: Publish web-app-serve + uses: toggle-corp/web-app-serve-action@v0.1.1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index bb29c0f..48f0ec3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,22 +1,48 @@ -/node_modules - -/build -/coverage -/generated - -.env - -.vscode - +# Logs +logs +*.log npm-debug.log* -yarn-debug.log* -yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +build +build-ssr +*.local +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? *.tmp *.bak *.swp +# Env +.env* +!.env.example + .eslintcache tsconfig.tsbuildinfo -.DS_Store +# Custom ignores +stats.html +generated/ +coverage/ + +# storybook build +storybook-static/ + +# Helm +.helm-charts/ + +# Pnpm +.pnpm-store diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..73b9d0f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "backend"] + path = backend + url = git@github.com:mapswipe/mapswipe-backend.git diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..6c59086 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +enable-pre-post-scripts=true diff --git a/.unimportedrc.json b/.unimportedrc.json deleted file mode 100644 index abc7832..0000000 --- a/.unimportedrc.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "entry": ["./app/index.tsx"], - "ignorePatterns": ["**/node_modules/**", "build/**", "jest/**", "generated/**"], - "ignoreUnimported": [ - "postcss.config.js", - "stylelint.config.js", - "webpack.config.js", - "jest.config.js", - "type.template.tsx", - "**/*.d.ts", - "**/*.test.ts" - ], - "ignoreUnused": ["core-js"], - "extensions": [".ts", ".js", ".tsx", ".jsx"], - "aliases": { - "#generated/*": ["./generated/*"], - "#components/*": ["./app/components/*"], - "#views/*": ["./app/views/*"], - "#resources/*": ["./app/resources/*"], - "#base/*": ["./app/Base/*"], - "#utils/*": ["./app/Base/utils/*"], - "#hooks/*": ["./app/hooks/*"] - } -} diff --git a/Dockerfile b/Dockerfile index c5fb76d..3ea185b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,16 +1,45 @@ -FROM node:17-buster-slim AS dev +FROM node:20-bookworm AS dev -LABEL maintainer="togglecorp info@togglecorp.com" +LABEL maintainer="Mapswipe Dev" RUN apt-get update -y \ - && apt-get install -y --no-install-recommends \ - git bash python3 g++ make + && apt-get install -y --no-install-recommends git \ + && rm -rf /var/lib/apt/lists/* \ + && npm install -g pnpm@10.6.1 --force \ + && git config --global --add safe.directory /code WORKDIR /code -FROM dev AS full-client +# -------------------------- web-app-serve- Builder -------------------------------- -COPY ./package.json ./yarn.lock /code/ -RUN yarn install --frozen-lockfile +FROM dev AS web-app-serve-build + +COPY ./package.json ./pnpm-lock.yaml /code/ + +RUN pnpm install COPY . /code/ + +# Build variables (Requires backend pulled) + +ENV APP_GRAPHQL_ENDPOINT=http://localhost:8000/graphql/ +ENV APP_BACKEND_ENDPOINT=http://localhost:8000/ +ENV APP_ENVIRONMENT=development +ENV APP_SENTRY_DSN=temp +ENV APP_GA_TRACKING_ID=temp +ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql + +RUN pnpm generate:type && WEB_APP_SERVE_ENABLED=true pnpm build + +# --------------------------------------------------------------------- +# Final image using web-app-serve + +FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve + +LABEL org.opencontainers.image.source="https://github.com/my-org/my-best-dashboard" +LABEL org.opencontainers.image.authors="my-email@company.com" + +# Env for apply-config script +ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/ + +COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY" diff --git a/app/Base/components/Navbar/index.tsx b/app/Base/components/Navbar/index.tsx index c9dcdc3..51b6511 100644 --- a/app/Base/components/Navbar/index.tsx +++ b/app/Base/components/Navbar/index.tsx @@ -1,11 +1,11 @@ -import React, { useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useCallback } from 'react'; +import { useNavigate } from 'react-router'; import { _cs } from '@togglecorp/fujs'; -import mapSwipeLogo from '#resources/img/logo.svg'; import ItemSelectInput, { SearchItemType } from '#components/ItemSelectInput'; +import mapSwipeLogo from '#resources/img/logo.svg'; -import styles from './styles.css'; +import styles from './styles.module.css'; interface Props { className?: string; @@ -14,21 +14,21 @@ interface Props { function Navbar(props: Props) { const { className } = props; - const history = useHistory(); + const navigate = useNavigate(); // FIXME: use route.path const handleSelectItem = useCallback((item: SearchItemType | undefined) => { if (item) { - history.push(`/${item.type}/${item.id}/`); + navigate(`/${item.type}/${item.id}/`); } - }, [history]); + }, [navigate]); return (