wip

packages/components/.gitignore

@@ -0,0 +1,71 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+!.vscode/launch.json
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.classpath
+.cxx
+.gradle
+.idea
+.project
+.settings
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# Ruby
+example/vendor/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/
+
+# Turborepo
+.turbo/
+
+# generated by bob
+lib/

packages/components/.watchmanconfig

@@ -0,0 +1 @@
+{}

packages/components/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

packages/components/package.json

@@ -0,0 +1,218 @@
+{
+  "name": "@yoroi/components",
+  "version": "1.0.0",
+  "description": "The components mono package of Yoroi SDK",
+  "keywords": [
+    "yoroi",
+    "cardano",
+    "components",
+    "browser",
+    "react"
+  ],
+  "homepage": "https://github.com/Emurgo/yoroi/packages/components#readme",
+  "bugs": {
+    "url": "https://github.com/Emurgo/yoroi/issues"
+  },
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/Emurgo/yoroi.git",
+    "directory": "packages/components"
+  },
+  "license": "Apache-2.0",
+  "author": "EMURGO Fintech <[email protected]> (https://github.com/Emurgo/yoroi)",
+  "contributors": [
+    {
+      "name": "Juliano Lazzarotto",
+      "email": "[email protected]"
+    }
+  ],
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "source": "src/index",
+  "browser": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "build": "yarn tsc && yarn lint && yarn test --ci --silent && yarn clean && bob build",
+    "build:dev": "yarn tsc && yarn clean && bob build",
+    "build:release": "yarn build && yarn flow",
+    "clean": "del-cli lib",
+    "dgraph": "depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph.svg",
+    "flow": ". ./scripts/flowgen.sh",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "yarn build:release",
+    "prepublish:beta": "yarn build:release",
+    "publish:beta": "npm publish --scope yoroi --tag beta --access beta",
+    "prepublish:prod": "yarn build:release",
+    "publish:prod": "npm publish --scope yoroi --access public",
+    "release": "release-it",
+    "test": "jest --maxWorkers=1",
+    "test:watch": "jest --watch --debug --maxWorkers=1",
+    "tsc": "tsc --noEmit -p tsconfig.json"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "prettier": {
+    "bracketSpacing": false,
+    "quoteProps": "consistent",
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+  },
+  "eslintConfig": {
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "bracketSpacing": false,
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "all",
+          "useTabs": false,
+          "semi": false
+        }
+      ]
+    },
+    "root": true
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "babel.config.js",
+    "jest.setup.js",
+    "coverage/"
+  ],
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/fixtures/**"
+    ],
+    "coverageReporters": [
+      "text-summary",
+      "html"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "preset": "react-native",
+    "setupFiles": [
+      "<rootDir>/jest.setup.js"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^12.3.0",
+    "@tsconfig/react-native": "^3.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.55",
+    "@types/react-test-renderer": "^18.0.7",
+    "@yoroi/types": "1.5.9",
+    "axios": "^1.5.0",
+    "axios-mock-adapter": "^1.21.5",
+    "bignumber.js": "^9.0.1",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "dependency-cruiser": "^13.1.1",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ft-flow": "^3.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "flowgen": "^1.21.0",
+    "immer": "^10.0.3",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "~0.71.0",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-mmkv": "^2.11.0",
+    "react-query": "^3.39.3",
+    "react-test-renderer": "^18.2.0",
+    "release-it": "^15.0.0",
+    "rxjs": "^7.8.1",
+    "typescript": "^5.3.3",
+    "zod": "^3.22.1"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.0 <= 19.0.0"
+  },
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">= 16.19.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "tsc": "./node_modules/.bin/tsc"
+        }
+      ]
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": false
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  }
+}

packages/components/scripts/flowgen.sh

@@ -0,0 +1,3 @@
+for i in $(find lib -type f -name "*.d.ts");
+  do sh -c "npx flowgen $i -o ${i%.*.*}.js.flow";
+done;

packages/components/src/fixtures/ErrorBoundary.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {render, waitFor} from '@testing-library/react-native'
+import {ErrorBoundary} from './ErrorBoundary'
+
+const ProblematicChild = () => {
+  throw new Error('Test error')
+}
+
+describe('ErrorBoundary', () => {
+  test('should display an error message when a child component throws an error', async () => {
+    const {getByTestId} = render(
+      <ErrorBoundary>
+        <ProblematicChild />
+      </ErrorBoundary>,
+    )
+
+    await waitFor(() => {
+      expect(getByTestId('hasError')).toBeDefined()
+    })
+
+    expect(getByTestId('hasError').props.children[0].props.children).toEqual(
+      'hasError',
+    )
+  })
+})

packages/components/src/fixtures/ErrorBoundary.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import {View, Text} from 'react-native'
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  state: State = {
+    hasError: false,
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {hasError: true, error}
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View testID="hasError">
+          <Text>hasError</Text>
+          <Text>{JSON.stringify(this.state.error)}</Text>
+        </View>
+      )
+    }
+
+    return this.props.children
+  }
+}

packages/components/src/fixtures/SuspenseBoundary.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {render} from '@testing-library/react-native'
+import {SuspenseBoundary} from './SuspenseBoundary'
+import {Text} from 'react-native'
+
+const LazyComponent = React.lazy(() =>
+  Promise.resolve({default: () => <Text>Lazy Component Loaded</Text>}),
+)
+
+describe('SuspenseBoundary Component', () => {
+  it('renders fallback content while suspending', async () => {
+    const {findByTestId} = render(
+      <SuspenseBoundary>
+        <LazyComponent />
+      </SuspenseBoundary>,
+    )
+
+    const fallbackContent = await findByTestId('suspending')
+    expect(fallbackContent).toBeTruthy()
+  })
+})