feat: added ui react js library

apps/frontend/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

libs/ui/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "pure": true,
+        "ssr": true
+      }
+    ]
+  ]
+}

libs/ui/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/ui/README.md

@@ -0,0 +1,7 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests via [Jest](https://jestjs.io).

libs/ui/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/ui',
+};

libs/ui/project.json

@@ -0,0 +1,30 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/ui/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/ui/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}

libs/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/ui';

libs/ui/src/lib/ui.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Ui from './ui';
+
+describe('Ui', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Ui />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/ui.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+/* eslint-disable-next-line */
+export interface UiProps {}
+
+const StyledUi = styled.div`
+  color: pink;
+`;
+
+export function Ui(props: UiProps) {
+  return (
+    <StyledUi>
+      <h1>Welcome to Ui!</h1>
+    </StyledUi>
+  );
+}
+
+export default Ui;

libs/ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

libs/ui/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.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"]
+}

libs/ui/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

nx.json

@@ -4,31 +4,18 @@
     "default": {
       "runner": "nx-cloud",
       "options": {
-        "cacheableOperations": [
+        "cacheableOperations": ["build", "lint", "test", "e2e"],
-          "build",
-          "lint",
-          "test",
-          "e2e"
-        ],
         "accessToken": "MjRlZTEyMmItZThlMS00MjBlLWI2MjctZDIxMzg2ZDJmOTkyfHJlYWQtd3JpdGU="
       }
     }
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": [
+      "dependsOn": ["^build"],
-        "^build"
+      "inputs": ["production", "^production"]
-      ],
-      "inputs": [
-        "production",
-        "^production"
-      ]
     },
     "e2e": {
-      "inputs": [
+      "inputs": ["default", "^production"]
-        "default",
-        "^production"
-      ]
     },
     "lint": {
       "inputs": [
@@ -38,18 +25,11 @@
       ]
     },
     "test": {
-      "inputs": [
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
-        "default",
-        "^production",
-        "{workspaceRoot}/jest.preset.js"
-      ]
     }
   },
   "namedInputs": {
-    "default": [
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
-      "{projectRoot}/**/*",
-      "sharedGlobals"
-    ],
     "production": [
       "default",
       "!{projectRoot}/.eslintrc.json",
@@ -72,7 +52,8 @@
       },
       "library": {
         "style": "scss",
-        "linter": "eslint"
+        "linter": "eslint",
+        "unitTestRunner": "jest"
       }
     }
   }

package.json

@@ -17,8 +17,10 @@
     "graphql": "^16.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-is": "18.2.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
+    "styled-components": "5.3.6",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -26,6 +28,7 @@
     "@nestjs/schematics": "^10.0.1",
     "@nestjs/testing": "^10.0.2",
     "@nrwl/nest": "^16.4.0",
+    "@nrwl/storybook": "^16.4.1",
     "@nx/cypress": "16.4.0",
     "@nx/eslint-plugin": "16.4.0",
     "@nx/jest": "16.4.0",
@@ -45,9 +48,12 @@
     "@types/node": "18.14.2",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
+    "@types/react-is": "18.2.1",
+    "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
     "babel-jest": "^29.4.1",
+    "babel-plugin-styled-components": "1.10.7",
     "cypress": "^12.11.0",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",

tsconfig.base.json

@@ -14,7 +14,9 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
-    "paths": {}
+    "paths": {
+      "@platform/ui": ["libs/ui/src/index.ts"]
+    }
   },
   "exclude": ["node_modules", "tmp"]
 }