Merge pull request #1 from flow-build/chore/DAT-385

chore/DAT-385: Configurações da biblioteca

Author: wallace-sf

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "prettier",
+    "eslint-plugin-import-helpers",
+    "import",
+    "react-hooks"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "linebreak-style": ["error", "unix"],
+    "max-len": ["error", { "code": 80, "ignoreUrls": true }],
+    "import-helpers/order-imports": [
+      "error",
+      {
+        "newlinesBetween": "always",
+        "groups": ["/^react/", "module", ["parent", "sibling", "index"]],
+        "alphabetize": { "order": "asc", "ignoreCase": true }
+      }
+    ],
+    "no-console": "warn",
+    "no-nested-ternary": "off",
+    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "import/no-unresolved": "error",
+    "import/prefer-default-export": "off"
+  },
+  "settings": {
+    "import/resolver": {}
+  }
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "printWidth": 80
+}

.storybook/main.js

@@ -0,0 +1,10 @@
+export default {
+  clearMocks: true,
+  preset: 'ts-jest',
+  roots: ['<rootDir>/src'],
+  testEnvironment: 'jsdom',
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+};

.storybook/preview.js

@@ -1,42 +1,49 @@
 {
+  "name": "@flowbuild/react-mqtt-workflow-manager",
   "version": "0.1.0",
   "license": "MIT",
+  "description": "A react wrapper manager for MQTT",
+  "repository": "https://github.com/flow-build/react-mqtt-workflow-manager",
+  "homepage": "https://github.com/flow-build/react-mqtt-workflow-manager/#readme",
+  "author": {
+    "name": "FlowBuild",
+    "url": "https://github.com/flow-build"
+  },
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">=10"
   },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "scripts": {
     "dev": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "build": "rimraf dist/ && tsdx build",
+    "test": "jest",
+    "lint": "eslint --fix",
+    "fmt": "prettier --write src/**/*.{ts,tsx}",
+    "fmt:check": "prettier --check src/**/*.{ts,tsx}",
+    "prepare": "tsdx build && husky install",
     "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "analyze": "size-limit --why"
   },
   "peerDependencies": {
-    "react": ">=16"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
-  "name": "react-mqtt-workflow-manager",
-  "author": "wallace-sf",
   "module": "dist/react-mqtt-workflow-manager.esm.js",
   "size-limit": [
     {
@@ -51,21 +58,54 @@
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
     "babel-loader": "^9.1.2",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import-helpers": "^1.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "rimraf": "^4.1.2",
+    "semantic-release": "^20.1.1",
     "size-limit": "^8.2.4",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "mqtt": "^4.3.7"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "yarn lint",
+      "yarn fmt"
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "typescript": true,
+        "node": true
+      }
+    }
   }
 }

CHANGELOG.md

@@ -1,7 +1,31 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+
+import { connect, MqttClient } from 'mqtt';
 
 import { WorkflowManagerProps } from './types';
 
-export const WorkflowManager: FC<WorkflowManagerProps> = ({ children }) => {
-  return <div>{children || `Hello WorkflowManager`}</div>;
+export const WorkflowManager: FC<WorkflowManagerProps> = ({
+  brokerUrl,
+  options,
+  children,
+}) => {
+  const [client, setClient] = useState<MqttClient | null>(null);
+
+  const init = useCallback(() => {
+    if (client === null) {
+      try {
+        const mqttInstance = connect(brokerUrl, options);
+
+        setClient(mqttInstance);
+      } catch (error) {
+        // TODO: Handle error with invariant
+      }
+    }
+  }, [brokerUrl, client, options]);
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  return <>{children}</>;
 };

jest.config.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { WorkflowManager } from '../WorkflowManager';
+
+describe('WorkflowManager component', () => {
+  beforeEach(() => {
+    const props = { brokerUrl: 'http://localhost:8080' };
+
+    render(<WorkflowManager {...props} />);
+  });
+
+  it('should render', () => {
+    expect(true).toBeTruthy();
+  });
+});