feat: boilerplate for UI (#14)

* feat: boilerplate for UI * refactor: rename files. change default export for named export
2022-12-01 10:25:30 -03:00 · 2022-12-01 10:25:30 -03:00 · c3f4030173
parent 320a5a45e3
commit c3f4030173
14 changed files with 2500 additions and 0 deletions
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@ -0,0 +1,2 @@
+node_modules
+public
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      { allowExpressions: true },
+    ],
+    '@typescript-eslint/no-namespace': 'off',
+    'simple-import-sort/imports': 2,
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'no-console': 'error',
+  },
+};
--- a/ui/.prettierrc
+++ b/ui/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "endOfLine": "crlf"
+}
--- a/ui/index.html
+++ b/ui/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://lh3.googleusercontent.com/a-/ACNPEu94rLyADmAJ80HamM8yp4ddV3AzoaMz3whdBH0D=s80-p"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Minimal UI for Sites as NFTs. Fleek XYZ"
+    />
+    <title>Sites as NFTS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
--- a/ui/package.json
+++ b/ui/package.json
@ -0,0 +1,36 @@
+{
+  "name": "sites-as-nfts",
+  "version": "0.0.1",
+  "description": "Minimal UI for sites as NFTs",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --watch",
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "author": "Fleek",
+  "license": "ISC",
+  "dependencies": {
+    "path": "^0.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.3",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "prettier": "^2.8.0",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4"
+  }
+}
--- a/ui/public/index.html
+++ b/ui/public/index.html
--- a/ui/src/app.css
+++ b/ui/src/app.css
@ -0,0 +1,3 @@
+.main {
+  text-align: center;
+}
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@ -0,0 +1,10 @@
+import React from 'react';
+import './App.css';
+
+export const App = () => {
+  return (
+    <div className="main">
+      <h1>Welcome to Sites as NFTs by Fleek</h1>
+    </div>
+  );
+};
--- a/ui/src/index.css
+++ b/ui/src/index.css
@ -0,0 +1,21 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { App } from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2019",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "rootDirs": ["src", "tests"],
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"],
+      "@tests/*": ["../tests/*"]
+    },
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "tests", "mocks"]
+}
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/ui/vire.config.ts
+++ b/ui/vire.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
--- a/ui/yarn.lock
+++ b/ui/yarn.lock