wip: build chain-ui with galachain/sdk monorepo

This is a work-in-progress commit. It all started with simply wanting to build our typedoc generated documentation for modules such as chain-api, chaincode, etc. The short summary is that chain-ui is a UI package, designed to contain multiple front-end libraries/packages. It looks like web component and vue versions to start. And the rest of the mono-repo is GalaChain / Hyperledger Fabric based modules that use Node 18 vs 20, and are fully backend. I may or may not return to this in the future. But I'm publishing this just in case it's useful to anyone else who embarks on this build. Maybe a developer that was involved in the initial chain-ui build. Or maybe we will collectively decide to rework our monorepo structure and separate concerns between UI and backend / blockchain / Hyperledger Fabric libraries. These notes are for my future self or others. I was fully unfamiliar with Vue, Vite, tailwind, etc. etc. and the original development context of this entire chain-ui segment of our monorepo prior to attempting to get all this to build together. And I haven't done any front end work since sometime prior to November 1, 2021. It feels like I made it almost all the way through troubleshooting the monorepo build of galachain/sdk, post-chain-ui merge. However, solving each hurdle seemed to lead to another and eventually I had to move on to other engagements. Rough notes follow Some errors in progress of working through: $ npm run typedoc-chain-api ``` > @gala-chain/sdk@1.4.2 typedoc-chain-api > typedoc --tsconfig ./tsconfig.base.json --hideGenerator --plugin typedoc-plugin-markdown --githubPages false --out ./docs/chain-api-docs ./chain-api/src && rm ./docs/chain-api-docs/README.md [info] Loaded plugin typedoc-plugin-markdown chain-ui/src/components/MintToken.stories.ts:18:23 - error TS2307: Cannot find module './MintToken.vue' or its corresponding type declarations. 18 import MintToken from './MintToken.vue' ~~~~~~~~~~~~~~~~~ chain-ui/src/components/MintTokenWithAllowance.stories.ts:18:36 - error TS2307: Cannot find module './MintTokenWithAllowance.vue' or its corresponding type declarations. 18 import MintTokenWithAllowance from './MintTokenWithAllowance.vue' ``` Many, many more errors like the above follow - lots of TypeScript compilation problems. Possibly in part due to the root of the mono-repo using a different tsconfig than the genesis of this chain-ui package, I'll warrant. ``` Rollup failed to resolve import "primevue/inputText" If you do want to externalize this module explicitly add it to`build.rollupOptions.external` ``` ``` npm i --install-strategy=nested tailwindcss-primeui ``` This link looks similar to what we have - https://storybook.js.org/docs/writing-stories/typescript ``` type Story = StoryObj<typeof Button>; ``` storybookjs/storybook#23352 It appears maybe 7.0.18 broke non-prop custom args Vue3 + TypeScript storybookjs/storybook#22229 And maybe this rolled back some breaking changes seems we're using CSF 2, version 3 migration guide is available and is also discussed in improved ts features blog post https://storybook.js.org/docs/api/csf?ref=storybookblog.ghost.io#upgrading-from-csf-2-to-csf-3 https://storybook.js.org/blog/storybook-csf3-is-here/?ref=storybookblog.ghost.io https://storybook.js.org/blog/improved-type-safety-in-storybook-7/ ``` executed in chain-ui folder $ npm install --install-strategy=nested primevue ``` ``` $ grep primevue package-lock.json "primevue": "^3.53.0", "chain-ui/node_modules/primevue": { "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.53.0.tgz", ``` ran in root dir, doesn't solve ``` npm install -w chain-ui --install-strategy=nested primevue cd chain-ui npm install --install-strategy=nested primevue ``` troubleshooting ``` delete primevue from chain-ui/package.json cd .. npm install cd chain-ui npm install --save --install-strategy=nested primevue ``` https://docs.npmjs.com/cli/v10/using-npm/workspaces https://docs.npmjs.com/cli/v10/using-npm/workspaces#defining-workspaces https://docs.npmjs.com/downloading-and-installing-packages-locally https://docs.npmjs.com/cli/v10/commands/npm-install#install-strategy https://docs.npmjs.com/cli/v10/commands/npm-install#configuration https://docs.npmjs.com/cli/v10/configuring-npm/npmrc https://docs.npmjs.com/cli/v10/configuring-npm/package-json?v=true#bundledependencies https://nx.dev/concepts/decisions/why-monorepos https://nx.dev/nx-api/storybook https://nx.dev/nx-api/storybook https://nodejs.org/api/packages.html#conditional-exports https://v3.primevue.org/theming/ https://v3.primevue.org/vite https://stackoverflow.com/questions/61467722/difference-between-npm-update-and-remove-package-lock-json-plus-npm-install https://stackoverflow.com/questions/77755121/vue-tsc-failing-with-error-referenced-project-may-not-disable-emit-on-vue-proj https://stackoverflow.com/questions/76935759/how-to-get-vite-ts-and-vue-to-properly-work-in-vs-code https://www.geeksforgeeks.org/how-to-override-nested-npm-dependency-versions/ https://blog.logrocket.com/comparing-vue-3-options-api-composition-api/ https://stackoverflow.com/questions/71055016/vue-3-defineprops-with-types-and-componentobjectpropsoptions-like-default-or-va https://stackoverflow.com/questions/66288645/vite-does-not-build-tailwind-based-on-config https://vitejs.dev/guide/features.html#postcss https://stackoverflow.com/questions/66288645/vite-does-not-build-tailwind-based-on-config/78451703#78451703 https://tailwindcss.com/docs/content-configuration https://vitejs.dev/config/build-options#build-target https://rollupjs.org/configuration-options/ https://rollupjs.org/configuration-options/#output-hoisttransitiveimports https://rollupjs.org/configuration-options/#context https://nx.dev/recipes/vite/configure-vite https://nx.dev/nx-api/vite https://nx.dev/nx-api/vite/generators/configuration https://stackoverflow.com/questions/70807080/how-to-change-the-ts-path-aliases-for-an-nx-application https://tailwindcss.com/docs/guides/vite#vue https://v2.tailwindcss.com/docs/guides/vue-3-vite https://tailwindcss.com/docs/customizing-colors https://primevue.org/tailwind/ Omitted various links to github issues in related dependencies
sentientforest · Sep 23, 2024 · 1b4ea85 · 1b4ea85
1 parent 84a8926
commit 1b4ea85
Show file tree

Hide file tree

Showing 33 changed files with 2,037 additions and 3,879 deletions.
diff --git a/...ncode/src/types/createValidChainObject.ts → ...n-api/src/types/createValidChainObject.ts b/...ncode/src/types/createValidChainObject.ts → ...n-api/src/types/createValidChainObject.ts
@@ -18,7 +18,7 @@
  */
 import { ChainObject, ClassConstructor, NonFunctionProperties, RangedChainObject } from "@gala-chain/api";
 
-export async function createValidChainObject<T extends ChainObject | RangedChainObject>(
+export async function createValidChainObject<T extends ChainObject>(
   constructor: ClassConstructor<T>,
   plain: NonFunctionProperties<T>
 ): Promise<T> {
@@ -31,3 +31,16 @@ export async function createValidChainObject<T extends ChainObject | RangedChain
 
   return obj;
 }
+
+export async function createValidRangedChainObject<T extends RangedChainObject>(  constructor: ClassConstructor<T>,
+  plain: NonFunctionProperties<T>
+): Promise<T> {
+  const obj = new constructor();
+  Object.entries(plain).forEach(([k, v]) => {
+    obj[k] = v;
+  });
+
+  await obj.validateOrReject();
+
+  return obj;
+}
diff --git a/chain-api/src/types/index.ts b/chain-api/src/types/index.ts
@@ -18,6 +18,7 @@ export * from "./ccp";
 export * from "./ChainObject";
 export * from "./RangedChainObject";
 export * from "./contract";
+export * from "./createValidChainObject";
 export * from "./dtos";
 export * from "./logger";
 export * from "./PublicKey";

diff --git a/chain-ui/package.json b/chain-ui/package.json
@@ -21,25 +21,27 @@
     "packages/*"
   ],
   "dependencies": {
-    "@gala-chain/api": "^1.2.0",
+    "@gala-chain/api": "1.4.3",
     "@heroicons/vue": "^2.1.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "bignumber.js": "^9.1.2",
-    "primevue": "^3.52.0",
-    "tailwindcss": "^3.4.4",
-    "vue": "^3.4.21",
     "glob": "11.0.0",
-    "vite": "^5.4.2",
-    "@vitejs/plugin-vue": "5.1.2",
-    "vite-plugin-dts": "3.9.1",
-    "vitest": "1.6.0"
+    "primevue": "^4.0.7",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-primeui": "^0.3.4",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@nx/storybook": "19.4.2",
-    "@nx/vite": "19.4.2",
-    "@nx/vue": "19.4.2",
     "@rushstack/eslint-patch": "^1.8.0",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/core-server": "7.6.20",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3": "7.6.20",
+    "@storybook/vue3-vite": "7.6.20",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.12.5",
@@ -50,18 +52,18 @@
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
+    "eslint": "*",
     "glob": "^11.0.0",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.8",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.4.0",
+    "storybook": "7.6.20",
+    "typescript": "5.x.x",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "3.9.1",
+    "vitest": "1.6.0",
     "vue-tsc": "^2.0.11"
   }
 }
diff --git a/chain-ui/packages/galachain-ui-vue/package.json b/chain-ui/packages/galachain-ui-vue/package.json
@@ -17,20 +17,6 @@
     }
   },
   "scripts": {},
-  "dependencies": {
-    "glob": "11.0.0",
-    "@heroicons/vue": "2.1.5",
-    "vue": "3.4.38",
-    "primevue": "3.53.0",
-    "@gala-chain/api": "1.4.3",
-    "@vuelidate/core": "2.0.3",
-    "@vuelidate/validators": "2.0.4",
-    "bignumber.js": "9.1.2",
-    "tailwindcss": "3.4.10",
-    "vite": "5.4.2",
-    "@vitejs/plugin-vue": "5.1.2",
-    "vite-plugin-dts": "3.9.1",
-    "vitest": "1.6.0"
-  },
+  "dependencies": {},
   "devDependencies": {}
 }
diff --git a/chain-ui/packages/galachain-ui/package.json b/chain-ui/packages/galachain-ui/package.json
@@ -17,20 +17,6 @@
     }
   },
   "scripts": {},
-  "dependencies": {
-    "glob": "11.0.0",
-    "@heroicons/vue": "2.1.5",
-    "vue": "3.4.38",
-    "primevue": "3.53.0",
-    "@gala-chain/api": "1.4.3",
-    "@vuelidate/core": "2.0.3",
-    "@vuelidate/validators": "2.0.4",
-    "bignumber.js": "9.1.2",
-    "tailwindcss": "3.4.10",
-    "vite": "5.4.2",
-    "@vitejs/plugin-vue": "5.1.2",
-    "vite-plugin-dts": "3.9.1",
-    "vitest": "1.6.0"
-  },
+  "dependencies": {},
   "devDependencies": {}
 }
diff --git a/chain-ui/project.json b/chain-ui/project.json
@@ -1,16 +1,19 @@
 {
   "name": "chain-ui",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "chain-ui/src",
+  "root": "chain-ui",
+  "sourceRoot": "chain-ui",
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nx/js:tsc",
+      "executor": "@nx/vite:build",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/ui",
-        "main": "chain-ui/src/index.ts",
+
+        "outputPath": "chain-ui/packages/galachain-ui-vue/dist",
+        "main": "chain-ui/src/vue-package.ts",
         "tsConfig": "chain-ui/tsconfig.app.json",
+        "configFile": "chain-ui/vite.config.vue.ts",
         "assets": ["chain-ui/*.md"]
       }
     },

diff --git a/chain-ui/src/components/Form/Input.vue b/chain-ui/src/components/Form/Input.vue
@@ -26,7 +26,7 @@ import type {
 import FormErrors from './Errors.vue'
 import PrimePassword from 'primevue/password'
 import PrimeTextarea from 'primevue/textarea'
-import PrimeInputText from 'primevue/inputText'
+import PrimeInputText from 'primevue/inputtext'
 
 const props = defineProps<
   IFieldProps & (IInputProps | INumberInputProps | IPasswordInputProps | ITextAreaInputProps)

diff --git a/chain-ui/src/components/MintToken.stories.ts b/chain-ui/src/components/MintToken.stories.ts
@@ -16,16 +16,21 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { action } from '@storybook/addon-actions'
 import MintToken from './MintToken.vue'
+import { createValidChainObject, TokenAllowance, TokenClass } from '@gala-chain/api'
+import BigNumber from 'bignumber.js'
 
 const meta: Meta<typeof MintToken> = {
-  component: MintToken
-}
+  component: MintToken,
+  args: {
+    onSubmit: action('submit')
+  }
+};
 
 export default meta
 type Story = StoryObj<typeof MintToken>
 
 const tokenAllowance = {
-  token: {
+  token: await createValidChainObject(TokenClass, {
     additionalKey: 'none',
     authorities: [],
     category: 'Unit',
@@ -34,18 +39,18 @@ const tokenAllowance = {
     description: 'GALA token',
     image: 'https://app.gala.games/_nuxt/img/GALA-icon.b642e24.png',
     isNonFungible: false,
-    maxCapacity: '50000000000',
-    maxSupply: '50000000000',
+    maxCapacity: new BigNumber('50000000000'),
+    maxSupply: new BigNumber('50000000000'),
     name: 'GALA',
     network: 'GC',
     symbol: 'GALA',
-    totalBurned: '0',
-    totalMintAllowance: '0',
-    totalSupply: '50000000000',
+    totalBurned: new BigNumber('0'),
+    totalMintAllowance: new BigNumber('0'),
+    totalSupply: new BigNumber('50000000000'),
     type: 'none'
-  },
+  }),
   allowances: [
-    {
+    await createValidChainObject(TokenAllowance, {
       additionalKey: 'none',
       allowanceType: 4,
       category: 'Unit',
@@ -54,35 +59,28 @@ const tokenAllowance = {
       expires: 0,
       grantedBy: '',
       grantedTo: '',
-      instance: '0',
-      quantity: '1000',
-      quantitySpent: '0',
+      instance: new BigNumber('0'),
+      quantity: new BigNumber('1000'),
+      quantitySpent: new BigNumber('0'),
       type: 'none',
-      uses: '1000',
-      usesSpent: '0'
-    }
+      uses: new BigNumber('1000'),
+      usesSpent: new BigNumber('0')
+    })
   ]
 }
 
-const Template = (args) => ({
-  components: { MintToken },
-  setup() {
-    return { args }
-  },
-  methods: { submit: action('submit') },
-  template: '<MintToken v-bind="args" @submit="submit"/>'
-})
-
-export const Primary: Story = Template.bind({})
-Primary.args = {
-  tokenAllowance,
-  loading: false,
-  disabled: false
-}
+export const Primary: Story = {
+  args: {
+    tokenAllowance,
+    loading: false,
+    disabled: false
+  }
+};
 
-export const Empty: Story = Template.bind({})
-Empty.args = {
-  tokenAllowance: undefined,
-  loading: false,
-  disabled: false
+export const Empty: Story = {
+  args: {
+    tokenAllowance: undefined,
+    loading: false,
+    disabled: false
+  }
 }
diff --git a/chain-ui/src/components/MintToken.vue b/chain-ui/src/components/MintToken.vue
@@ -19,13 +19,9 @@ import { TokenClass, MintTokenDto, TransferTokenDto } from '@gala-chain/api'
 import GalaSend, { type TokenClassBalance } from '@/components/common/Send.vue'
 import { TokenAllowance } from '@gala-chain/api'
 import { calculateAvailableMintAllowances } from '@/utils/calculateBalance'
-import type { IGalaChainError } from '../types/galachain-error'
+import { type IGalaChainError } from '@/types/galachain-error'
 import PrimeSkeleton from 'primevue/skeleton'
-
-export interface MintTokenProps {
-  tokenAllowance?: { token: TokenClass; allowances: TokenAllowance[] }
-  loading?: boolean
-}
+import type { MintTokenProps } from '@/types/props'
 
 const props = defineProps<MintTokenProps>()
 
@@ -70,7 +66,7 @@ const submit = (payload: TransferTokenDto) => {
     :loading="loading"
     :show-recipient="false"
     @submit="submit"
-    @error="(event) => emit('error', event)"
+    @error="(event: any) => emit('error', event)"
     to-header="Mint to"
     submit-text="Mint"
   >

diff --git a/chain-ui/src/components/MintTokenWithAllowance.stories.ts b/chain-ui/src/components/MintTokenWithAllowance.stories.ts
@@ -16,15 +16,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { action } from '@storybook/addon-actions'
 import MintTokenWithAllowance from './MintTokenWithAllowance.vue'
+import { createValidChainObject, TokenClass } from '@gala-chain/api';
+import BigNumber from 'bignumber.js';
 
 const meta: Meta<typeof MintTokenWithAllowance> = {
-  component: MintTokenWithAllowance
+  component: MintTokenWithAllowance,
+  args: {
+    onSubmit: action('submit')
+  }
 }
 
 export default meta
 type Story = StoryObj<typeof MintTokenWithAllowance>
 
-const token = {
+const token = await createValidChainObject(TokenClass, {
   additionalKey: 'none',
   authorities: ['client|test'],
   category: 'Unit',
@@ -33,40 +38,33 @@ const token = {
   description: 'GALA token',
   image: 'https://app.gala.games/_nuxt/img/GALA-icon.b642e24.png',
   isNonFungible: false,
-  knownMintAllowanceSupply: '5000000000',
-  knownMintSupply: '50000000000',
-  maxCapacity: '50000000000',
-  maxSupply: '50000000000',
+  knownMintAllowanceSupply: new BigNumber('5000000000'),
+  knownMintSupply: new BigNumber('50000000000'),
+  maxCapacity: new BigNumber('50000000000'),
+  maxSupply: new BigNumber('50000000000'),
   name: 'GALA',
   network: 'GC',
   symbol: 'GALA',
-  totalBurned: '5000',
-  totalMintAllowance: '50000000000',
-  totalSupply: '50000000000',
+  totalBurned: new BigNumber('5000'),
+  totalMintAllowance: new BigNumber('50000000000'),
+  totalSupply: new BigNumber('50000000000'),
   type: 'none'
-}
-
-const Template = (args) => ({
-  components: { MintTokenWithAllowance },
-  setup() {
-    return { args }
-  },
-  methods: { submit: action('submit') },
-  template: '<MintTokenWithAllowance v-bind="args" @submit="submit"/>'
-})
+});
 
-export const Primary: Story = Template.bind({})
-Primary.args = {
-  token,
-  address: 'client|test',
-  loading: false,
-  disabled: false
+export const Primary: Story = {
+  args: {
+    token,
+    address: 'client|test',
+    loading: false,
+    disabled: false
+  }
 }
 
-export const Empty: Story = Template.bind({})
-Empty.args = {
-  token: undefined,
-  address: 'client|test',
-  loading: false,
-  disabled: false
+export const Empty: Story = {
+  args: {
+    token: undefined,
+    address: 'client|test',
+    loading: false,
+    disabled: false
+  }
 }