Create workflows and auto release (#77)

MatiPl01 · web-flow · commit 719508844c36 · 2023-06-06T23:28:33.000+02:00
* Some improvements

* Finish tools improvements

* Add semantic-release configuration

* Add workflows

* Fix yarn ci command

* Add react-native-builder-bob

* v0.0.3

* Fix some issues

* chore: test commitizen hook

* feat: finish semantic-release setup

* chore: add GitHub actions names
diff --git a/.bundle/config b/.bundle/config
@@ -1,2 +1,2 @@
 BUNDLE_PATH: "vendor/bundle"
-BUNDLE_FORCE_RUBY_PLATFORM: 1
+BUNDLE_FORCE_RUBY_PLATFORM: 1
diff --git a/.eslintignore b/.eslintignore
@@ -3,6 +3,8 @@ babel.config.cjs.js
 babel.config.esm.js
 metro.config.js
 tailwind.config.js
+jest.config.js
+jest.setup.js
 bob.config.js
 index.js
 
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,7 @@
+## Description
+
+Describe what was changed in this pull request
+
+## Example images/recordings
+
+Include example images/recordings if the new feature introduces some visual changes
diff --git a/.github/workflows/check_pr_title.yml b/.github/workflows/check_pr_title.yml
@@ -0,0 +1,19 @@
+name: 'Check PR Title'
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  check-pr-title:
+    name: 🔡 Check PR Title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@25e3275e19cd5b3577a99478084255065002897c
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          requireScope: true
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,23 @@
+name: Release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  release:
+    name: 🚀 Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,21 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: 🛠️ Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: yarn install --frozen-lockfile
+      - run: yarn test
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+exec < /dev/tty && npx cz --hook || true
diff --git a/.releaserc.js b/.releaserc.js
@@ -0,0 +1,29 @@
+module.exports = {
+  branches: ['main'],
+  plugins: [
+    // Analyzes commit messages and
+    // determines the version
+    '@semantic-release/commit-analyzer',
+    // Builds release notes from commit messages
+    '@semantic-release/release-notes-generator',
+    // Updates the version
+    '@semantic-release/npm',
+    [
+      // Commits, tags, and pushes
+      '@semantic-release/git',
+      {
+        assets: [
+          'ios/$PROJECTNAME*/Info.plist',
+          'ios/$PROJECTNAME.xcodeproj/project.pbxproj',
+          'android/app/build.gradle',
+          'package.json'
+        ],
+        message:
+          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}'
+      }
+    ],
+    // Creates the release on GitHub
+    // and posts release notes
+    '@semantic-release/github'
+  ]
+};
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# React Native Smart Graph
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
diff --git a/index.js b/index.js
@@ -1,7 +1,7 @@
 /**
- * This file is the entry point for the tester app using the library.
+ * This file is the main entry point for the local development server.
  *
- * It is used to test if everything works properly.
+ * It is used to test the library.
  */
 import { AppRegistry } from 'react-native';
 import App from '@/examples/Development';
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,15 @@
+const { defaults: tsjPreset } = require('ts-jest/presets');
+
+module.exports = {
+  ...tsjPreset,
+  preset: 'react-native',
+  globals: {
+    'ts-jest': {
+      babelConfig: true
+    }
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  transformIgnorePatterns: ['jest-runner'],
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  setupFiles: ['./jest.setup.js']
+};
diff --git a/jest.setup.js b/jest.setup.js
@@ -0,0 +1,48 @@
+import { NativeModules as RNNativeModules, View } from 'react-native';
+import { createElement } from 'react';
+
+RNNativeModules.UIManager = RNNativeModules.UIManager || {};
+RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
+RNNativeModules.RNGestureHandlerModule =
+  RNNativeModules.RNGestureHandlerModule || {
+    State: { BEGAN: 'BEGAN', FAILED: 'FAILED', ACTIVE: 'ACTIVE', END: 'END' },
+    attachGestureHandler: jest.fn(),
+    createGestureHandler: jest.fn(),
+    dropGestureHandler: jest.fn(),
+    updateGestureHandler: jest.fn()
+  };
+
+RNNativeModules.PlatformConstants = RNNativeModules.PlatformConstants || {
+  forceTouchAvailable: false
+};
+
+const PlainView = ({ children, ...props }) =>
+  createElement(View, props, children);
+const noop = () => null;
+
+jest.mock('@shopify/react-native-skia', () => {
+  const mock = {
+    // other props can be added which
+    // aren't handled properly
+    // by the handler
+    Canvas: PlainView
+  };
+  const handler = {
+    get(_, prop, __) {
+      // first look for the prop in the mock
+      if (prop in mock) {
+        return mock[prop];
+      }
+      // class case? return a view
+      if (prop[0] === prop[0].toUpperCase()) {
+        return PlainView;
+      }
+      // probably a method
+      return noop;
+    }
+  };
+  return new Proxy(mock, handler);
+});
+
+jest.mock('src/assets/fonts/Rubik-Regular.ttf', () => 'Rubik-Regular.ttf');
+jest.useFakeTimers();
diff --git a/package.json b/package.json
@@ -1,11 +1,16 @@
 {
-  "name": "react-native-force-graph",
-  "description": "React Native library for creating dynamic force-directed graphs",
+  "name": "react-native-smart-graph",
+  "description": "React Native library for creating animated dynamic graphs",
   "version": "0.0.1-development",
   "author": {
     "name": "Mateusz Łopaciński",
     "email": "lop.mateusz.2001@gmail.com"
   },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -19,6 +24,8 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/runtime": "^7.22.3",
     "@react-native-community/eslint-config": "^3.2.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^10.0.3",
     "@shopify/react-native-skia": "^0.1.193",
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.2",
@@ -27,6 +34,8 @@
     "babel-jest": "^29.5.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-react-require": "^4.0.0",
+    "commitizen": "^4.3.0",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.41.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
@@ -48,20 +57,15 @@
     "react-native-reanimated": "^3.2.0",
     "react-native-svg": "^13.9.0",
     "react-test-renderer": "^18.2.0",
+    "semantic-release": "^21.0.2",
     "syncpack": "^10.1.0",
-    "tailwindcss": "^3.3.2",
+    "ts-jest": "^29.1.0",
     "tsc-alias": "^1.8.6",
     "typescript": "^5.1.0"
   },
   "files": [
     "dist"
   ],
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/dist/"
-    ]
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix",
@@ -82,19 +86,21 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": "MatiPl01/react-native-force-graph",
+  "repository": "MatiPl01/react-native-smart-graph",
   "scripts": {
     "android": "react-native run-android",
     "build": "yarn clean && bob build && yarn declarations:emit",
-    "clean": "rm -rf dist && rm -rf react-native-force-graph*.tgz",
-    "declarations:emit": "tsc && tsc-alias",
+    "clean": "rm -rf dist && rm -f *.tgz",
+    "commit": "cz",
+    "declarations:emit": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "format:code": "prettier --write .",
     "format:deps": "syncpack format",
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "prepack": "yarn build",
     "prepare": "husky install",
+    "semantic-release": "semantic-release",
     "start": "react-native start",
     "test": "jest"
   },
diff --git a/src/__tests__/Development.test.tsx b/src/__tests__/Development.test.tsx
@@ -1,14 +1,8 @@
-/**
- * @format
- */
-import 'react-native';
-
-import React from 'react';
 // Note: test renderer must be required after react-native.
 import { create } from 'react-test-renderer';
 
-import App from '@/examples/Development';
+import Development from '@/examples/Development';
 
 it('renders correctly', () => {
-  create(<App />);
+  create(<Development />);
 });
diff --git a/src/components/graphs/GraphComponent.tsx b/src/components/graphs/GraphComponent.tsx
@@ -1,21 +1,15 @@
-import DefaultEdgeArrowRenderer from './arrows/renderers/DefaultEdgeArrowRenderer';
-import EdgeComponent from './edges/EdgeComponent';
-import DefaultCurvedEdgeRenderer from './edges/curved/renderers/DefaultCurvedEdgeRenderer';
-import DefaultStraightEdgeRenderer from './edges/straight/renderers/DefaultStraightEdgeRenderer';
-import VertexComponent from './vertices/VertexComponent';
-import DefaultVertexRenderer from './vertices/renderers/DefaultVertexRenderer';
+import { Group, Vector } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAnimatedReaction } from 'react-native-reanimated';
+
 import {
   ARROW_COMPONENT_SETTINGS,
   CURVED_EDGE_COMPONENT_SETTINGS,
   LABEL_COMPONENT_SETTINGS,
   STRAIGHT_EDGE_COMPONENT_SETTINGS,
   VERTEX_COMPONENT_SETTINGS
 } from '@/constants/components';
-import {
-  RANDOM_PLACEMENT_SETTING,
-  SHARED_PLACEMENT_SETTINGS,
-  TRIANGLES_PLACEMENT_SETTING
-} from '@/constants/placement';
+import { RANDOM_PLACEMENT_SETTING } from '@/constants/placement';
 import { GraphEventsContextType } from '@/context/graphEvents';
 import { useGraphObserver } from '@/hooks';
 import { EdgeComponentProps } from '@/types/components';
@@ -36,9 +30,13 @@ import {
 } from '@/types/settings';
 import { animateVerticesToFinalPositions } from '@/utils/animations';
 import { placeVertices } from '@/utils/placement';
-import { Group, Vector } from '@shopify/react-native-skia';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAnimatedReaction } from 'react-native-reanimated';
+
+import DefaultEdgeArrowRenderer from './arrows/renderers/DefaultEdgeArrowRenderer';
+import DefaultCurvedEdgeRenderer from './edges/curved/renderers/DefaultCurvedEdgeRenderer';
+import EdgeComponent from './edges/EdgeComponent';
+import DefaultStraightEdgeRenderer from './edges/straight/renderers/DefaultStraightEdgeRenderer';
+import DefaultVertexRenderer from './vertices/renderers/DefaultVertexRenderer';
+import VertexComponent from './vertices/VertexComponent';
 
 export type GraphComponentPrivateProps<V, E> = {
   boundingRect: AnimatedBoundingRect;
@@ -116,7 +114,7 @@ export default function GraphComponent<
     const newSettings: GraphSettingsWithDefaults<V, E> = {
       ...settings,
       placement: {
-        ...RANDOM_PLACEMENT_SETTING as RandomPlacementSettings,
+        ...(RANDOM_PLACEMENT_SETTING as RandomPlacementSettings),
         ...settings?.placement
       },
       components: {
diff --git a/src/examples/Development.tsx b/src/examples/Development.tsx
@@ -98,7 +98,6 @@ export default function App() {
     vertices: [{ key: 'A', data: 'A' }]
   });
 
-  // TODO - remove this useEffect after testing
   useEffect(() => {
     const interval = setInterval(() => {
       if (idx < 0 || idx >= ADDED_COMPONENTS.length) {
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types"
+  },
+  "exclude": ["**/__tests__", "**/__mocks__", "**/*.test.ts", "**/*.spec.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,10 +15,6 @@
     "removeComments": true,
     "checkJs": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": false,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist/types",
     "rootDir": "./src",
     "baseUrl": "./src",
     "paths": {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`BUNDLE_PATH: "vendor/bundle"`
`2`		`-BUNDLE_FORCE_RUBY_PLATFORM: 1`
	`2`	`+BUNDLE_FORCE_RUBY_PLATFORM: 1`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# React Native Smart Graph`
	`2`	`+`
	`3`	`+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)`