Merge pull request #215 from hngprojects/remix-setup

Remix setup

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+coverage
+html
+dist
+!.prettierrc.cjs

.eslintrc.cjs

@@ -1,83 +1,68 @@
+// @ts-check
+
 /**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
+ * To use this configuration, you need to install the following dependencies:
+ *
+ * eslint@^8.57.0 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-unicorn eslint-plugin-unused-imports@^3.2.0 prettier eslint-config-prettier eslint-plugin-prettier @ianvs/prettier-plugin-sort-imports prettier-plugin-tailwindcss
+ *
+ *
+ * To Replicate the vitest configuration, you need to install the following dependencies:
+ *
+ * eslint-plugin-vitest@^0.4.1 eslint-testing-library
+ *
+ * Also replicate the .prettierrc.cjs file in the root of your project.
  */
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
+  reportUnusedDisableDirectives: true,
   env: {
     browser: true,
-    commonjs: true,
-    es6: true,
+    es2020: true,
   },
-  ignorePatterns: ["!**/.server", "!**/.client"],
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {},
-        },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:unicorn/recommended",
+    "plugin:prettier/recommended",
+  ],
+  ignorePatterns: ["dist", "node_modules"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react", "unicorn", "unused-imports"],
+  rules: {
+    "react/prop-types": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_",
       },
-    },
-
-    // Typescript
+    ],
+    "unicorn/filename-case": [
+      "error",
+      { cases: { kebabCase: true, pascalCase: true, camelCase: true } },
+    ],
+  },
+  settings: {
+    react: { version: "detect" },
+    vitest: { typecheck: true },
+  },
+  overrides: [
     {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
+      files: [".eslintrc.*js", ".vite(|st).(js|ts)"],
+      env: { node: true },
     },
-
-    // Node
     {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
+      files: ["*.d.ts"],
+      rules: {
+        "unicorn/prevent-abbreviations": "off",
       },
     },
   ],

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,38 @@
+name: Feature
+description: An enhancement or feature
+title: "[Feature]: "
+labels: ["triage", "feature"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A step-by-step description of the suggested feature/enhancement.
+      placeholder: On the user page, you should be able to...
+    validations:
+      required: true
+  - type: textarea
+    id: acceptanceCriteria
+    attributes:
+      label: Acceptance Criteria
+      description: What are the things that must be achieved for your ticket to be considered complete.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: >
+        | Please include any screenshots which would help demonstrate the steps
+        and point out which parts the feature is related to
+  - type: textarea
+    id: links
+    attributes:
+      label: Links
+      description: Place links to supporting docs here. e.g. Figma
+      value: >
+        | [`FIGMA LINK`](LINK_HERE)
+  - type: textarea
+    id: images
+    attributes:
+      label: Images
+      description: Paste images or image urls
+      value: "![image](URL_HERE)"

.github/pull_request_template.md

@@ -0,0 +1,47 @@
+<!-- Do not delete this PR template. Just edit it to include the required information -->
+
+# Description
+
+<!-- If your PR fixes an open issue, use `Closes #999` to link your PR with the issue. #999 stands for the issue number you are fixing -->
+
+<!-- Github Issue Example: Closes #31 -->
+
+**Closes #issue_number_here**
+
+# Changes proposed
+
+## What were you told to do?
+
+<!-- Write the title of the issue/feature you are working on -->
+
+## What did you do?
+
+<!-- Talk about the things you did eg. files changes, dependencies installed e.t.c -->
+
+# Check List (Check all the applicable boxes)
+
+🚨Please review the [contribution guideline](CONTRIBUTING.md) for this repository.
+
+<!-- Mark all the applicable boxes. To mark the box as done follow the following conventions -->
+
+<!--
+[x] - Correct; marked as done
+[X] - Correct; marked as done
+
+[ ] - Not correct; marked as **not** done
+-->
+
+- [] My code follows the code style of this project.
+- [] This PR does not contain plagiarized content.
+- [] The title and description of the PR is clear and explains the approach.
+- [] I am making a pull request against the **dev branch** (left side).
+- [] My commit messages styles matches our requested structure.
+- [] My code additions will fail neither code linting checks nor unit test.
+- [] I am only making changes to files I was requested to.
+
+# Screenshots/Videos
+
+<!-- If the changes are static page changes or UI changes add screenshots -->
+<!-- If the changes involve implementing a functionality or working with apis, include a video
+detailing how to implement the functionality and the request to the api and responses from the api endpoint-->
+<!-- Add all the screenshots/videos which support your changes i.e before your change and after your change -->

.github/workflows/initial-label.yml

@@ -0,0 +1,18 @@
+name: Label new issues
+on:
+  issues:
+    types:
+      - reopened
+      - opened
+jobs:
+  label_issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - run: gh issue edit "$NUMBER" --add-label "$LABELS"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.issue.number }}
+          LABELS: triage

.github/workflows/lint.yml

@@ -0,0 +1,21 @@
+name: Lint
+
+on:
+  pull_request:
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - run: pnpm install
+      - uses: reviewdog/action-eslint@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          eslint_flags: ". --ext js,jsx,ts,tsx --ignore-path=.gitignore"

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+/.react-email
 
 /.cache
 /build

.prettierrc.cjs

@@ -0,0 +1,22 @@
+/** @type {import('prettier').Config & import("@ianvs/prettier-plugin-sort-imports").PluginConfig} */
+module.exports = {
+  tabWidth: 2,
+  printWidth: 80,
+  jsxSingleQuote: false,
+  singleQuote: false,
+  semi: true,
+  trailingComma: "all",
+  arrowParens: "always",
+  endOfLine: "auto",
+
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+
+  // #region @ianvs/prettier-plugin-sort-imports
+  importOrder: ["<THIRD_PARTY_MODULES>", "", "^~/", "^[.][.]/", "^[.]/"],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "5.0.0",
+  // #endregion @ianvs/prettier-plugin-sort-imports
+};

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "[javascript][javascriptreact][typescript][typescriptreact]": {
+        "editor.formatOnSave": false,
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always"
+    },
+}

app/components/index.ts

@@ -0,0 +1 @@
+export {};

app/components/ui/DataCard.tsx

@@ -1,28 +1,25 @@
-import { ReactNode } from 'react'
-type DataCardType = {
-    title: string,
-    amount: string,
-    subText: string,
-    icon: ReactNode,
-}
+import { ReactNode } from "react";
 
+type DataCardType = {
+  title: string;
+  amount: string;
+  subText: string;
+  icon: ReactNode;
+};
 
 const DataCard = ({ title, amount, subText, icon }: DataCardType) => {
-    return (
-
-        <section className='[box-shadow:0px_1px_18px_0px_#cbd5e1] px-6 pt-[23px] pb-10 inline-block rounded-[12px]'>
-
-            <header className=" flex items-center gap-[158px]">
-                <p className='font-medium text-sm text-[#0A0A0A]'>{title}</p>
-                <span>{icon}</span>
-            </header>
-            <div className=" mt-1">
-                <h4 className='font-semibold text-2xl text-[#0A0A0A]'>${amount}</h4>
-                <p className='text-[#525252] text-[12px] font-normal'>{subText}</p>
-            </div>
-
-        </section>
-    )
-}
+  return (
+    <section className="inline-block rounded-[12px] px-6 pb-10 pt-[23px] [box-shadow:0px_1px_18px_0px_#cbd5e1]">
+      <header className="flex items-center gap-[158px]">
+        <p className="text-sm font-medium text-[#0A0A0A]">{title}</p>
+        <span>{icon}</span>
+      </header>
+      <div className="mt-1">
+        <h4 className="text-2xl font-semibold text-[#0A0A0A]">${amount}</h4>
+        <p className="text-[12px] font-normal text-[#525252]">{subText}</p>
+      </div>
+    </section>
+  );
+};
 
-export default DataCard
+export default DataCard;