feat: financial statement

abide by `@nx/enforce-module-boundaries`, converting packages to be buildable
OriginProtocol · Sep 29, 2023 · fc2ad08 · fc2ad08
1 parent 5b6b7ae
commit fc2ad08
Show file tree

Hide file tree

Showing 26 changed files with 385 additions and 104 deletions.
diff --git a/libs/financial-statement/package.json b/libs/financial-statement/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@origin/financial-statement",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

diff --git a/libs/financial-statement/tsconfig.json b/libs/financial-statement/tsconfig.json
@@ -9,12 +9,6 @@
       "vite/client"
     ]
   },
-  "files": [
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts",
-    "../../libs/shared/theme/src/theme.d.ts",
-    "../../apps/oeth/src/env.d.ts"
-  ],
   "include": [],
   "references": [
     {

diff --git a/libs/financial-statement/tsconfig.lib.json b/libs/financial-statement/tsconfig.lib.json
@@ -4,11 +4,15 @@
     "outDir": "../../dist/out-tsc",
     "types": [
       "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
       "vite/client"
     ]
   },
+  "files": [
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts",
+    "../../libs/shared/theme/src/theme.d.ts",
+    "../../apps/oeth/src/env.d.ts"
+  ],
   "exclude": [
     "**/*.spec.ts",
     "**/*.test.ts",

diff --git a/libs/financial-statement/vite.config.ts b/libs/financial-statement/vite.config.ts
@@ -11,8 +11,7 @@ export default defineConfig({
   plugins: [
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
     react(),
     nxViteTsPaths(),

diff --git a/libs/oeth/history/src/components/Filters.tsx b/libs/oeth/history/src/components/Filters.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import {
   alpha,
@@ -21,6 +21,8 @@ import { useIntl } from 'react-intl';
 
 import { HistoryFilterButton } from './HistoryButton';
 
+import type { HistoryType } from '@origin/oeth/shared';
+
 const styles = {
   fontSize: '0.75rem',
   fontWeight: 500,
@@ -29,16 +31,19 @@ const styles = {
 };
 
 interface Props {
-  onChange: (values: string[]) => void;
+  onChange: (values: HistoryType[]) => void;
 }
 
 export function HistoryFilters({ onChange }: Props) {
-  const [selected, setSelectedTypes] = useState<string[]>([]);
+  const [selected, setSelectedTypes] = useState<HistoryType[]>([]);
   const intl = useIntl();
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
-  function selection(e: React.ChangeEvent<HTMLInputElement>, label: string) {
+  function selection(
+    e: React.ChangeEvent<HTMLInputElement>,
+    label: HistoryType,
+  ) {
     setSelectedTypes((prev) => {
       if (e.target.checked) {
         return [...prev, label];
@@ -94,52 +99,54 @@ export function HistoryFilters({ onChange }: Props) {
         </Typography>
         <Divider sx={{ marginBlockEnd: 2 }} />
 
-        {['Yield', 'Swap', 'Sent', 'Received'].map((label) => (
-          <Stack
-            key={label}
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            sx={{
-              paddingInline: 2,
-              paddingBlock: 0,
-              paddingTop: 0,
-              paddingBottom: 0,
-              ...styles,
-              ':hover': {
-                background: (theme) => theme.palette.grey[700],
-              },
-            }}
-          >
-            <FormLabel htmlFor={label} sx={{ color: 'primary.contrastText' }}>
-              {label}
-            </FormLabel>
-
-            <Checkbox
-              inputProps={{ id: label }}
-              checked={selected.includes(label)}
-              checkedIcon={<CheckboxIcon />}
-              icon={<EmptyCheckbox />}
+        {(['Yield', 'Swap', 'Sent', 'Received'] as HistoryType[]).map(
+          (label) => (
+            <Stack
+              key={label}
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
               sx={{
-                '& svg, input': {
-                  width: '1.25rem',
-                  height: '1.25rem',
-                  top: 'auto',
-                  left: 'auto',
-                },
-                '&:hover:has(input:checked) svg': {
-                  fill: (theme) => alpha(theme.palette.secondary.main, 0.4),
-                  strokeWidth: '1px',
-                  stroke: (theme) => theme.palette.primary.main,
-                },
-                '&:hover:has(input:not(:checked)) svg': {
-                  fill: (theme) => alpha(theme.palette.secondary.main, 0.4),
+                paddingInline: 2,
+                paddingBlock: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                ...styles,
+                ':hover': {
+                  background: (theme) => theme.palette.grey[700],
                 },
               }}
-              onChange={(e) => selection(e, label)}
-            />
-          </Stack>
-        ))}
+            >
+              <FormLabel htmlFor={label} sx={{ color: 'primary.contrastText' }}>
+                {label}
+              </FormLabel>
+
+              <Checkbox
+                inputProps={{ id: label }}
+                checked={selected.includes(label)}
+                checkedIcon={<CheckboxIcon />}
+                icon={<EmptyCheckbox />}
+                sx={{
+                  '& svg, input': {
+                    width: '1.25rem',
+                    height: '1.25rem',
+                    top: 'auto',
+                    left: 'auto',
+                  },
+                  '&:hover:has(input:checked) svg': {
+                    fill: (theme) => alpha(theme.palette.secondary.main, 0.4),
+                    strokeWidth: '1px',
+                    stroke: (theme) => theme.palette.primary.main,
+                  },
+                  '&:hover:has(input:not(:checked)) svg': {
+                    fill: (theme) => alpha(theme.palette.secondary.main, 0.4),
+                  },
+                }}
+                onChange={(e) => selection(e, label)}
+              />
+            </Stack>
+          ),
+        )}
 
         <Divider sx={{ marginBlockStart: 2 }} />
         <Stack

diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx
@@ -9,12 +9,14 @@ import { ExportData } from './ExportData';
 import { HistoryFilters } from './Filters';
 import { HistoryTable } from './HistoryTable';
 
+import type { HistoryType } from '@origin/oeth/shared';
+
 const PAGE_SIZE = 20;
 
 export function HistoryCard() {
   const intl = useIntl();
   const [page, setPage] = useState(0);
-  const [filters, setFilters] = useState<string[]>([]);
+  const [filters, setFilters] = useState<HistoryType[]>([]);
   const { address, isConnected } = useAccount();
 
   const { data, isFetching } = useHistoryTableWithFiltersQuery(

diff --git a/libs/oeth/shared/.babelrc b/libs/oeth/shared/.babelrc
@@ -4,12 +4,9 @@
       "@nx/react/babel",
       {
         "runtime": "automatic",
-        "useBuiltIns": "usage",
-        "importSource": "@emotion/react"
+        "useBuiltIns": "usage"
       }
     ]
   ],
-  "plugins": [
-    "@emotion/babel-plugin"
-  ]
+  "plugins": []
 }
diff --git a/libs/oeth/shared/README.md b/libs/oeth/shared/README.md
@@ -4,4 +4,4 @@ This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `nx test oeth-shared` to execute the unit tests via [Jest](https://jestjs.io).
+Run `nx test oeth-shared` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/oeth/shared/package.json b/libs/oeth/shared/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@origin/oeth/shared",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/libs/oeth/shared/project.json b/libs/oeth/shared/project.json
@@ -5,14 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "codegen-graphql": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "pnpm graphql-codegen --config 'libs/oeth/shared/codegen.ts'"
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": [
@@ -23,6 +15,24 @@
           "libs/oeth/shared/**/*.{ts,tsx,js,jsx}"
         ]
       }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/oeth/shared"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
     }
   }
 }
diff --git a/libs/oeth/shared/tsconfig.json b/libs/oeth/shared/tsconfig.json
@@ -4,8 +4,9 @@
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "strict": false,
-    "jsxImportSource": "@emotion/react"
+    "types": [
+      "vite/client"
+    ]
   },
   "files": [],
   "include": [],

diff --git a/libs/oeth/shared/tsconfig.lib.json b/libs/oeth/shared/tsconfig.lib.json
@@ -2,14 +2,31 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      "vite/client"
+    ]
   },
   "files": [
     "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
     "../../../node_modules/@nx/react/typings/image.d.ts",
     "../../../libs/shared/theme/src/theme.d.ts",
-    "../../../apps/oeth/src/env.d.ts",
+    "../../../apps/oeth/src/env.d.ts"
   ],
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
 }
diff --git a/libs/oeth/shared/vite.config.ts b/libs/oeth/shared/vite.config.ts
@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/oeth-shared',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    nxViteTsPaths(),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'oeth-shared',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/libs/shared/providers/README.md b/libs/shared/providers/README.md
@@ -4,4 +4,4 @@ This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `nx test shared-providers` to execute the unit tests via [Jest](https://jestjs.io).
+Run `nx test shared-providers` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/shared/providers/package.json b/libs/shared/providers/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@origin/shared/providers",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}