Initialize hubble-stats (#1366)

tangle-network · Jun 22, 2023 · b2a90ef · b2a90ef
1 parent db11a4d
commit b2a90ef
Show file tree

Hide file tree

Showing 21 changed files with 328 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -94,4 +94,4 @@ apps/stats-dapp/graphql.schema.json
 .direnv
 
 # Generated by json files
-/**/generated/**/*.json
+/**/generated/**/*.json
diff --git a/apps/hubble-stats/.eslintrc.json b/apps/hubble-stats/.eslintrc.json
@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nx/react-typescript",
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "apps/hubble-stats/pages"
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}
diff --git a/apps/hubble-stats/.vscode/settings.json b/apps/hubble-stats/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/apps/hubble-stats/app/api/hello/route.ts b/apps/hubble-stats/app/api/hello/route.ts
@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, from API!');
+}
diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect } from 'react';
+import Head from 'next/head';
+import {
+  WebbUIProvider,
+  useDarkMode,
+  Footer,
+} from '@webb-tools/webb-ui-components';
+import '@webb-tools/webb-ui-components/tailwind.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [, setIsDarkMode] = useDarkMode();
+
+  useEffect(() => {
+    setIsDarkMode('light');
+  }, [setIsDarkMode]);
+
+  return (
+    <html lang="en">
+      <WebbUIProvider defaultThemeMode="light">
+        <Head>
+          <title>Welcome to Hubble Stats!</title>
+        </Head>
+        <body>
+          {children}
+          <Footer isMinimal />
+        </body>
+      </WebbUIProvider>
+    </html>
+  );
+}
diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx
@@ -0,0 +1,3 @@
+export default async function Index() {
+  return <div></div>;
+}
diff --git a/apps/hubble-stats/index.d.ts b/apps/hubble-stats/index.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}
diff --git a/apps/hubble-stats/jest.config.ts b/apps/hubble-stats/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'hubble-stats',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/hubble-stats',
+};
diff --git a/apps/hubble-stats/next-env.d.ts b/apps/hubble-stats/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.
diff --git a/apps/hubble-stats/next.config.js b/apps/hubble-stats/next.config.js
@@ -0,0 +1,26 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { composePlugins, withNx } = require('@nx/next');
+
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+
+  experimental: {
+    appDir: true,
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
diff --git a/apps/hubble-stats/postcss.config.js b/apps/hubble-stats/postcss.config.js
@@ -0,0 +1,17 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/apps/hubble-stats/project.json b/apps/hubble-stats/project.json
@@ -0,0 +1,69 @@
+{
+  "name": "hubble-stats",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/hubble-stats",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/next:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "root": "apps/hubble-stats",
+        "outputPath": "dist/apps/hubble-stats"
+      },
+      "configurations": {
+        "development": {
+          "outputPath": "apps/hubble-stats"
+        },
+        "production": {}
+      }
+    },
+    "serve": {
+      "executor": "@nx/next:server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "hubble-stats:build",
+        "dev": true
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "hubble-stats:build:development",
+          "dev": true
+        },
+        "production": {
+          "buildTarget": "hubble-stats:build:production",
+          "dev": false
+        }
+      }
+    },
+    "export": {
+      "executor": "@nx/next:export",
+      "options": {
+        "buildTarget": "hubble-stats:build:production"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/hubble-stats/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/hubble-stats/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/hubble-stats/public/.gitkeep b/apps/hubble-stats/public/.gitkeep
diff --git a/apps/hubble-stats/public/favicon.ico b/apps/hubble-stats/public/favicon.ico
diff --git a/apps/hubble-stats/tailwind.config.js b/apps/hubble-stats/tailwind.config.js
@@ -0,0 +1,25 @@
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+
+const preset = require('@webb-tools/tailwind-preset');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [preset],
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    join(
+      __dirname,
+      '../../libs/webb-ui-components',
+      'src/{pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/hubble-stats/tsconfig.json b/apps/hubble-stats/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "next-env.d.ts",
+    "../../apps/hubble-stats/.next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}
diff --git a/apps/hubble-stats/tsconfig.spec.json b/apps/hubble-stats/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "jsx": "react"
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/webb-ui-components/src/css/layer-components.css b/libs/webb-ui-components/src/css/layer-components.css
@@ -117,7 +117,8 @@
 }
 
 .mkt-monospace {
-  @apply text-[14px] leading-[20px] md:text-[16px] md:leading-[24px] font-satoshi-var;
+  @apply text-[14px] leading-[20px] md:text-[16px] md:leading-[24px];
+  fontfamily: 'Satoshi Variable';
 }
 
 @media screen and (max-width: 800px) {

diff --git a/nx.json b/nx.json
@@ -23,6 +23,7 @@
         "{workspaceRoot}/dist/apps/bridge-dapp",
         "{workspaceRoot}/dist/apps/stats-dapp",
         "{workspaceRoot}/dist/apps/faucet/.next",
+        "{workspaceRoot}/dist/apps/hubble-stats/.next",
         "{workspaceRoot}/dist/apps/tangle-website/.next",
         "{workspaceRoot}/dist/apps/webbsite/.next"
       ]

diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
     "build:stats": "yarn gql:codegen && yarn nx build stats-dapp",
     "build:webbsite": "nx build webbsite",
     "build:tangle-website": "nx build tangle-website",
+    "build:hubble-stats": "nx build hubble-stats",
     "build:storybook": "nx build-storybook webb-ui-components",
     "build:faucet": "nx build faucet",
     "export:faucet": "nx export faucet",
     "start:bridge": "yarn nx serve bridge-dapp",
     "start:stats": "yarn gql:codegen && yarn nx serve stats-dapp",
     "start:webbsite": "nx serve webbsite",
     "start:tangle-website": "nx serve tangle-website",
+    "start:hubble-stats": "nx serve hubble-stats",
     "start:storybook": "nx storybook webb-ui-components",
     "start:faucet": "nx serve faucet",
     "format": "prettier --write \"{libs,apps,tools}/**/*.{ts,js,jsx,tsx,svg}\" ",
@@ -132,6 +134,7 @@
     "rxjs": "7.8.1",
     "snarkjs": "0.6.11",
     "swiper": "^9.3.2",
+    "tslib": "^2.3.0",
     "twitter-api-v2": "^1.14.2",
     "use-local-storage-state": "^18.3.0",
     "viem": "^0.3.41",
@@ -259,6 +262,7 @@
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "react-refresh": "0.14.0",
+    "react-test-renderer": "18.2.0",
     "readline": "^1.3.0",
     "rollup": "^3.21.8",
     "rollup-plugin-copy": "3.4.0",