feat: inited repo with libs

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining",
+    "babel-plugin-ts-nameof"
+  ]
+}

.eslintignore

@@ -0,0 +1,8 @@
+node_modules/
+
+build/
+coverage/
+lib/
+dist/
+.next/
+.linaria-cache/

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": ["@typescript-eslint", "import", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    },
+    "project": ["./tsconfig.eslint.json", "./tsconfig.json"],
+    "tsconfigRootDir": "./"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "react/prop-types": 0,
+    "prefer-const": "error",
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": "*", "next": "case" }
+    ],
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx", "*.ts"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "error",
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
+      }
+    }
+  ],
+  "globals": {
+    "nameof": "readonly"
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,39 @@
+### Project
+
+.linaria-cache
+.idea
+*.swp
+
+### Node
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Next.js build output
+.next

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.prettierignore

@@ -0,0 +1,23 @@
+# Project
+node_modules/
+.*
+!.babelrc
+*.log
+*.sh
+*.tsbuildinfo
+*.gz
+yarn.lock
+/lib
+/dist
+/coverage
+/build
+/coverage
+
+# Images
+*.svg
+*.jpg
+*.png
+*.cur
+
+# markdown
+*.md

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none"
+}

README.md

@@ -0,0 +1,20 @@
+# Cerulean Blue technical task
+
+## Description
+
+You are tasked to build a simple app to search for NFTs from [OpenSea API](https://docs.opensea.io/reference/api-overview). 
+
+
+Following are the steps to follow: 
+- Connect to a Web3 Wallet, using [web3modal](https://github.com/Web3Modal/web3modal)
+- Display your wallet's balance for two currencies namely, ETH and USDC 
+- Build a Search component, which uses OpenSeaAPI in order to fetch data 
+- Have interactive filters such as Cost, Date etc. to filter data 
+- Lastly make the layout mobile responsive and performant.
+
+Note: This task has a 50% weightage towards Engineering and 50% weightage towards Design Aesthetics. 
+Original Designs will be preferred, compared to out of the box UI library components.
+
+Tech Stack: Use React.Js or Next.Js, alongside Material UI for components.
+
+

commitlint.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [2, 'always']
+  }
+};

jest.config.js

@@ -0,0 +1,14 @@
+const TEST_REGEX = '(\\.|/)(spec)\\.(jsx?|js?|tsx?|ts?)$';
+
+module.exports = {
+  testRegex: TEST_REGEX,
+  transform: {
+    '^.+\\.(tsx?|js)$': 'babel-jest'
+  },
+  transformIgnorePatterns: [],
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  collectCoverage: true,
+  coverageReporters: ['lcov', 'html', 'text-summary'],
+  collectCoverageFrom: ['./src/**/*.tsx']
+};

linaria.config.js

@@ -0,0 +1 @@
+module.exports = { displayName: true };

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next-images" />

next.config.js

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const withImages = require('next-images');
+const withPlugins = require('next-compose-plugins');
+
+module.exports = withPlugins([withImages]);

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-next-starter-kit",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf ./.next ./.linaria-cache ./coverage",
+    "build": "yarn clean && next build",
+    "dev": "yarn clean && next",
+    "start": "next start",
+    "lint": "yarn lint:ts && yarn lint:commitlint && yarn lint:prettier && yarn lint:eslint && yarn lint:stylelint",
+    "lint:ts": "tsc",
+    "lint:commitlint": "yarn commitlint -c commitlint.config.js",
+    "lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx ./ --color --cache",
+    "lint:prettier": "prettier -c ./",
+    "lint:stylelint": "stylelint **/*.{ts,tsx}",
+    "test": "cross-env NODE_ENV=test jest",
+    "test:watch": "jest --watch",
+    "healthcheck": "yarn lint && yarn test && yarn build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "*.{json,md}": [
+      "prettier --write"
+    ],
+    "*.(ts,tsx)": [
+      "tsc --noEmit",
+      "prettier --write",
+      "stylelint",
+      "eslint --color --fix --cache"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@commitlint/config-conventional": "^12.1.1",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@types/jest": "^26.0.22",
+    "@types/react": "^17.0.3",
+    "@types/ts-nameof": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
+    "babel-plugin-ts-nameof": "^4.2.1",
+    "commitlint": "^12.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.23.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.5",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "next": "^10.1.3",
+    "next-compose-plugins": "^2.2.1",
+    "next-images": "^1.7.0",
+    "prettier": "^2.2.1",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.12.0",
+    "stylelint-config-standard": "^21.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-order": "^4.1.0",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "ts-nameof": "^5.0.0",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.9.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "web3": "^1.7.4",
+    "web3modal": "^1.9.8"
+  }
+}

pages/index.tsx

@@ -0,0 +1,7 @@
+import { memo } from 'react';
+import { Container } from '../src/containers';
+
+const Page = memo(() => <Container />);
+Page.displayName = nameof(Page);
+
+export default Page;

src/components/index.spec.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { Component } from '.';
+
+describe(nameof(Component), () => {
+  it('Simple test', () => {
+    render(<Component />);
+
+    const component = screen.getByTestId('test');
+    expect(component.textContent).toBe('Hello');
+  });
+});

src/components/index.tsx

@@ -0,0 +1 @@
+export const Component = () => <div data-testid="test">Hello</div>;

src/constants/index.tsx

@@ -0,0 +1 @@
+export const constant = 'test';

src/containers/index.tsx

@@ -0,0 +1,3 @@
+import { Component } from '../components';
+
+export const Container = () => <Component />;

src/utils/index.tsx

@@ -0,0 +1,2 @@
+export { isClientSide } from './isClientSide';
+export { useSwitcher } from './useSwitcher';

src/utils/isClientSide.tsx

@@ -0,0 +1 @@
+export const isClientSide = typeof window !== 'undefined';

src/utils/useSwitcher.tsx

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export const useSwitcher = (isDefaultSwitchedOn = false) => {
+  const [isSwitchedOn, setIsSwitchedOn] = useState(isDefaultSwitchedOn);
+
+  const switchOn = useCallback(() => setIsSwitchedOn(true), []);
+  const switchOff = useCallback(() => setIsSwitchedOn(false), []);
+  const toggleSwitcher = useCallback(() => setIsSwitchedOn((v) => !v), []);
+
+  return { isSwitchedOn, setIsSwitchedOn, switchOn, switchOff, toggleSwitcher };
+};

stylelint.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
+  processors: [
+    [
+      'stylelint-processor-styled-components',
+      {
+        parserPlugins: [
+          'jsx',
+          'objectRestSpread',
+          ['decorators', { decoratorsBeforeExport: true }],
+          'classProperties',
+          'exportExtensions',
+          'asyncGenerators',
+          'functionBind',
+          'functionSent',
+          'dynamicImport',
+          'optionalCatchBinding',
+          'optionalChaining',
+          'nullishCoalescingOperator'
+        ]
+      }
+    ]
+  ],
+  rules: {
+    'declaration-colon-newline-after': null
+  }
+};

tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig",
+  "include": ["**/*.js"],
+  "compilerOptions": {
+    "allowJs": true
+  },
+  "exclude": ["node_modules"]
+}