initial commit

.env.example

@@ -0,0 +1,3 @@
+REACT_APP_API_URL=http://api.bulletproofapp.com
+TSC_COMPILE_ON_ERROR=true
+ESLINT_NO_DEV_ERRORS=true

.eslintrc.js

@@ -0,0 +1,73 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  parserOptions: { ecmaVersion: 8, sourceType: 'module' },
+  ignorePatterns: ['node_modules/*'],
+  extends: ['eslint:recommended'],
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        react: { version: 'detect' },
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+      env: {
+        browser: true,
+        node: true,
+        es6: true,
+      },
+      extends: [
+        'eslint:recommended',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: ['@/features/*/*'],
+          },
+        ],
+        'linebreak-style': ['error', 'unix'],
+        'react/prop-types': 'off',
+
+        'import/order': [
+          'error',
+          {
+            groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
+            'newlines-between': 'always',
+            alphabetize: { order: 'asc', caseInsensitive: true },
+          },
+        ],
+        'import/default': 'off',
+        'import/no-named-as-default-member': 'off',
+        'import/no-named-as-default': 'off',
+
+        'react/react-in-jsx-scope': 'off',
+
+        'jsx-a11y/anchor-is-valid': 'off',
+
+        '@typescript-eslint/no-unused-vars': ['error'],
+
+        '@typescript-eslint/explicit-function-return-type': ['off'],
+        '@typescript-eslint/explicit-module-boundary-types': ['off'],
+        '@typescript-eslint/no-empty-function': ['off'],
+        '@typescript-eslint/no-explicit-any': ['off'],
+
+        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+      },
+    },
+  ],
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false
+}

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "dsznajder.es7-react-js-snippets",
+    "mariusalchimavicius.json-to-ts",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

craco.config.js

@@ -0,0 +1,13 @@
+const path = require("path");
+module.exports = {
+  webpack: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+};

generators/component/Component.tsx.hbs

@@ -0,0 +1,13 @@
+import React from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface {{ properCase name }}Props {}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const {{ properCase name }} = (props: {{ properCase name }}Props) => {
+  return (
+    <div>
+      {{ properCase name }}
+    </div>
+  );
+};

generators/component/index.js

@@ -0,0 +1,32 @@
+module.exports = {
+  description: 'Component Generator',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'component name',
+    },
+    {
+      type: 'input',
+      name: 'folder',
+      message: 'folder in components',
+    },
+  ],
+  actions: [
+    {
+      type: 'add',
+      path: 'src/components/{{folder}}/{{properCase name}}/index.ts',
+      templateFile: 'generators/component/index.ts.hbs',
+    },
+    {
+      type: 'add',
+      path: 'src/components/{{folder}}/{{properCase name}}/{{properCase name}}.tsx',
+      templateFile: 'generators/component/Component.tsx.hbs',
+    },
+    {
+      type: 'add',
+      path: 'src/components/{{folder}}/{{properCase name}}/{{properCase name}}.stories.tsx',
+      templateFile: 'generators/component/Component.stories.tsx.hbs',
+    },
+  ],
+};

generators/component/index.ts.hbs

@@ -0,0 +1 @@
+export * from './{{ properCase name }}';

package.json

@@ -3,30 +3,43 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
+    "@headlessui/react": "^1.2.0",
+    "@heroicons/react": "^1.0.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "axios": "^0.21.1",
+    "clsx": "^1.1.1",
+    "history": "^5.0.0",
+    "jsonwebtoken": "^8.5.1",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.7.1",
+    "react-query": "^3.16.0",
+    "react-query-auth": "^0.3.0",
+    "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "zod": "^3.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore .",
+    "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
+    "format": "npm run prettier -- --write",
+    "check-format": "npm run prettier -- --list-different",
+    "validate-and-build": "npm-run-all --parallel check-types check-format lint build",
+    "generate": "plop"
   },
   "browserslist": {
     "production": [
@@ -39,5 +52,27 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^8.5.1",
+    "@types/lodash": "^4.14.170",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
+    "autoprefixer": "^9",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "miragejs": "^0.1.41",
+    "npm-run-all": "^4.1.5",
+    "plop": "^2.7.4",
+    "postcss": "^7",
+    "prettier": "^2.3.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   }
 }

plopfile.js

@@ -0,0 +1,5 @@
+const componentGenerator = require('./generators/component/index');
+
+module.exports = function (plop) {
+  plop.setGenerator('component', componentGenerator);
+};

public/index.html

@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+
     <title>React App</title>
   </head>
   <body>

src/App.test.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
+
 import App from './App';
 
 test('renders learn react link', () => {

src/App.tsx

@@ -1,26 +1,10 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import AppProvider from './context/AppProvider';
+import { makeServer } from './server';
+
+makeServer({ environment: 'development' });
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <AppProvider>123</AppProvider>;
 }
 
 export default App;

src/components/Form/Form.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { useForm, UseFormReturn, SubmitHandler, UseFormProps } from 'react-hook-form';
+
+type FormProps<TFormValues> = {
+  className?: string;
+  onSubmit: SubmitHandler<TFormValues>;
+  children: (methods: UseFormReturn<TFormValues>) => ReactNode;
+  options?: UseFormProps<TFormValues>;
+};
+
+export const Form = <TFormValues extends Record<string, any> = Record<string, any>>({
+  onSubmit,
+  children,
+  className,
+  options,
+}: FormProps<TFormValues>) => {
+  const methods = useForm<TFormValues>(options);
+  return (
+    <form className={clsx('space-y-6', className)} onSubmit={methods.handleSubmit(onSubmit)}>
+      {children(methods)}
+    </form>
+  );
+};