init

CHANGELOG.md

@@ -0,0 +1 @@
+# Headen finance

commitlint.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    //   TODO Add Scope Enum Here
+    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'docs',
+        'chore',
+        'style',
+        'refactor',
+        'ci',
+        'test',
+        'perf',
+        'revert',
+        'vercel',
+      ],
+    ],
+  },
+};

jest.config.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+
+  testEnvironment: 'jest-environment-jsdom',
+
+  /**
+   * Absolute imports and Module Path Aliases
+   */
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/public/$1',
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom/extend-expect';
+
+// Allow router mocks.
+// eslint-disable-next-line no-undef
+jest.mock('next/router', () => require('next-router-mock'));

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-sitemap.config.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('next-sitemap').IConfig}
+ * @see https://github.com/iamvishnusankar/next-sitemap#readme
+ */
+module.exports = {
+  // !STARTERCONF Change the siteUrl
+  /** Without additional '/' on the end, e.g. https://theodorusclarence.com */
+  siteUrl: 'https://tsnext-tw.thcl.dev',
+  generateRobotsTxt: true,
+  robotsTxtOptions: {
+    policies: [{ userAgent: '*', allow: '/' }],
+  },
+};

next.config.js

@@ -0,0 +1,34 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  eslint: {
+    dirs: ['src'],
+  },
+
+  reactStrictMode: true,
+
+  // Uncoment to add domain whitelist
+  // images: {
+  //   domains: [
+  //     'res.cloudinary.com',
+  //   ],
+  // },
+
+  // SVGR
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            typescript: true,
+            icon: true,
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "headen-finance",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "eslint src --fix && yarn format",
+    "lint:strict": "eslint --max-warnings=0 src",
+    "typecheck": "tsc --noEmit --incremental false",
+    "test:watch": "jest --watch",
+    "test": "jest",
+    "format": "prettier -w .",
+    "format:check": "prettier -c .",
+    "postbuild": "next-sitemap --config next-sitemap.config.js",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1",
+    "next": "^12.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "tailwind-merge": "^1.6.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^16.3.0",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@svgr/webpack": "^6.3.1",
+    "@tailwindcss/forms": "^0.5.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.18",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "autoprefixer": "^10.4.8",
+    "eslint": "^8.23.0",
+    "eslint-config-next": "^12.3.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.5.0",
+    "next-router-mock": "^0.7.4",
+    "next-sitemap": "^2.5.28",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.8.3"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --max-warnings=0",
+      "prettier -w"
+    ],
+    "**/*.{json,css,scss,md}": [
+      "prettier -w"
+    ]
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

public/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "App",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

src/__tests__/pages/404.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+
+import NotFoundPage from '@/pages/404';
+
+describe('404', () => {
+  it('renders a heading', () => {
+    render(<NotFoundPage />);
+
+    const heading = screen.getByText(/not found/i);
+
+    expect(heading).toBeInTheDocument();
+  });
+});

src/components/NextImage.tsx

@@ -0,0 +1,59 @@
+import Image, { ImageProps } from 'next/image';
+import * as React from 'react';
+
+import clsxm from '@/lib/clsxm';
+
+type NextImageProps = {
+  useSkeleton?: boolean;
+  imgClassName?: string;
+  blurClassName?: string;
+  alt: string;
+  width: string | number;
+} & (
+  | { width: string | number; height: string | number }
+  | { layout: 'fill'; width?: string | number; height?: string | number }
+) &
+  ImageProps;
+
+/**
+ *
+ * @description Must set width using `w-` className
+ * @param useSkeleton add background with pulse animation, don't use it if image is transparent
+ */
+export default function NextImage({
+  useSkeleton = false,
+  src,
+  width,
+  height,
+  alt,
+  className,
+  imgClassName,
+  blurClassName,
+  ...rest
+}: NextImageProps) {
+  const [status, setStatus] = React.useState(
+    useSkeleton ? 'loading' : 'complete'
+  );
+  const widthIsSet = className?.includes('w-') ?? false;
+
+  return (
+    <figure
+      style={!widthIsSet ? { width: `${width}px` } : undefined}
+      className={className}
+    >
+      <Image
+        className={clsxm(
+          imgClassName,
+          status === 'loading' && clsxm('animate-pulse', blurClassName)
+        )}
+        src={src}
+        width={width}
+        height={height}
+        alt={alt}
+        onLoadingComplete={() => setStatus('complete')}
+        layout='responsive'
+        {...rest}
+      />
+    </figure>
+  );
+}