feat: SB-842 Extract documents to separate package

bitbucket-pipelines.yml

@@ -13,6 +13,7 @@ definitions:
     pnpmwebappapiclient: $BITBUCKET_CLONE_DIR/.pnpm-store
     pnpmwebappcontentful: $BITBUCKET_CLONE_DIR/.pnpm-store
     pnpmwebappcruddemo: $BITBUCKET_CLONE_DIR/.pnpm-store
+    pnpmwebappdocuments: $BITBUCKET_CLONE_DIR/.pnpm-store
     pnpmwebappnotifications: $BITBUCKET_CLONE_DIR/.pnpm-store
     pnpmwebappemails: $BITBUCKET_CLONE_DIR/.pnpm-store
     pnpmworkers: $BITBUCKET_CLONE_DIR/.pnpm-store
@@ -162,6 +163,26 @@ pipelines:
               - pnpmwebappcruddemo
               - clis
               - sonar
+        - step:
+            name: 'webapp-documents: Lint & test'
+            image: atlassian/default-image:4
+            size: 2x
+            script:
+              - *initializeStep
+              - pnpm install
+                --include-workspace-root
+                --frozen-lockfile
+                --filter=webapp-documents...
+              - node_modules/.bin/nx run webapp-documents:lint
+              - node_modules/.bin/nx run webapp-documents:test --watchAll=false --maxWorkers=20% --coverage
+              - pipe: sonarsource/sonarcloud-scan:1.4.0
+                variables:
+                  SONAR_TOKEN: ${SONAR_TOKEN}
+                  EXTRA_ARGS: '-Dsonar.projectBaseDir=packages/webapp-libs/webapp-documents'
+            caches:
+              - pnpmwebappdocuments
+              - clis
+              - sonar
         - step:
             name: 'webapp-notifications: Lint & test'
             image: atlassian/default-image:4

packages/webapp-libs/webapp-documents/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "node_modules/**/*"],
+  "plugins": ["react-hooks", "formatjs", "testing-library"],
+  "rules": {
+    "import/order": ["error"],
+    "formatjs/no-offset": "error",
+    "react/jsx-curly-brace-presence": "error"
+  },
+  "overrides": [
+    {
+      "files": "*.stories.tsx",
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    },
+    {
+      "files": "*.{ts,tsx}",
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "import/no-anonymous-default-export": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "no-empty": "off",
+        "react/jsx-no-useless-fragment": "off"
+      }
+    },
+    {
+      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+      "extends": ["plugin:testing-library/react"],
+      "rules": {
+        "testing-library/render-result-naming-convention": "off",
+        "testing-library/no-node-access": "off"
+      }
+    }
+  ]
+}

packages/webapp-libs/webapp-documents/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "importOrder": [
+    "^(path|dns|fs)/?",
+    "<THIRD_PARTY_MODULES>",
+    "^(__generated__|__generated|@types|app|contexts|emails|fonts|images|mocks|modules|routes|shared|tests|theme|translations)/?",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

packages/webapp-libs/webapp-documents/graphql/codegen.ts

@@ -0,0 +1,13 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: Partial<CodegenConfig> = {
+  generates: {
+    'src/graphql/__generated/gql/': {
+      documents: ['../webapp-documents/src/**/*.ts', '../webapp-documents/src/**/*.tsx'],
+
+      plugins: [],
+    },
+  },
+};
+
+export default config;

packages/webapp-libs/webapp-documents/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'webapp-documents',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!(@iconify-icons|react-markdown)/)'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  moduleNameMapper: {
+    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageReporters: ['lcov'],
+  coveragePathIgnorePatterns: ['/node_modules/', '.*.svg'],
+  setupFilesAfterEnv: ['./src/tests/setupTests.ts'],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+};

packages/webapp-libs/webapp-documents/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@sb/webapp-documents",
+  "version": "0.0.1",
+  "type": "commonjs",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@sb/webapp-api-client": "*",
+    "@sb/webapp-core": "*",
+    "graphql": "^16.6.0",
+    "react-loading-skeleton": "^3.1.0"
+  },
+  "peerDependencies": {
+    "@apollo/client": "^3.7.9",
+    "@iconify-icons/ion": "^1.2.4",
+    "@iconify/react": "^4.0.0",
+    "@storybook/react": "^6.5.16",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
+    "babel-jest": "28.1.3",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "msw": "^1.0.0",
+    "ramda": "^0.28.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "^6.2.1",
+    "react-markdown": "^8.0.3",
+    "react-router": "^6.7.0",
+    "react-router-dom": "^6.7.0",
+    "styled-components": "5.3.6"
+  },
+  "devDependencies": {
+    "@apollo/client": "^3.7.9",
+    "@apollo/rover": "^0.12.2",
+    "@graphql-codegen/cli": "^2.13.11",
+    "@iconify-icons/ion": "^1.2.4",
+    "@iconify/react": "^4.0.0",
+    "@nrwl/jest": "^15.8.6",
+    "@nrwl/react": "^15.8.6",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-backgrounds": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-measure": "^6.5.16",
+    "@storybook/addon-outline": "^6.5.16",
+    "@storybook/builder-vite": "^0.4.0",
+    "@storybook/client-api": "^6.5.16",
+    "@storybook/client-logger": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "28.1.3",
+    "@types/ramda": "^0.28.23",
+    "@types/react": "^18.0.24",
+    "@types/styled-components": "^5.1.26",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "babel-jest": "28.1.3",
+    "eslint-plugin-formatjs": "^4.3.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-matcher-utils": "^29.4.2",
+    "jest-watch-typeahead": "^2.2.2",
+    "ramda": "^0.28.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "^6.2.1",
+    "react-markdown": "^8.0.3",
+    "react-router": "^6.7.0",
+    "react-router-dom": "^6.7.0",
+    "styled-components": "5.3.6",
+    "ts-jest": "28.0.5"
+  }
+}

packages/webapp-libs/webapp-documents/project.json

@@ -0,0 +1,21 @@
+{
+  "name": "webapp-documents",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/webapp-libs/webapp-documents/src",
+  "projectType": "library",
+  "targets": {
+    "graphql": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/webapp-libs/webapp-documents",
+        "color": true
+      },
+      "configurations": {
+        "download-schema": {
+          "commands": ["/bin/sh ./scripts/download-graphql-schema.sh"]
+        }
+      }
+    }
+  },
+  "tags": []
+}

packages/webapp-libs/webapp-documents/sonar-project.properties

@@ -0,0 +1,14 @@
+sonar.organization=apptension
+sonar.projectKey=saas_boilerplate_webapp_documents
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# Define the same root directory for sources and tests
+sonar.sources = src/
+sonar.tests = src/
+
+# Include test subdirectories in test scope
+sonar.test.inclusions = src/**/*.spec.*
+
+# Exclude test and generated subdirectories from source scope
+sonar.exclusions = src/**/*.spec.*
+sonar.coverage.exclusions = src/**/*.stories.*,

packages/webapp/src/routes/documents/document/document.stories.tsx → packages/webapp-libs/webapp-documents/src/routes/documents/document/document.stories.tsx

@@ -2,7 +2,7 @@ import { documentFactory } from '@sb/webapp-api-client/tests/factories';
 import { Story } from '@storybook/react';
 import styled from 'styled-components';
 
-import { withProviders } from '../../../shared/utils/storybook';
+import { withProviders } from '../../../utils/storybook';
 import { Document, DocumentProps } from './document.component';
 
 const Container = styled.div`

packages/webapp/src/routes/documents/document/skeleton/skeleton.stories.tsx → packages/webapp-libs/webapp-documents/src/routes/documents/document/skeleton/skeleton.stories.tsx

@@ -1,7 +1,7 @@
 import { Story } from '@storybook/react';
 import styled from 'styled-components';
 
-import { withProviders } from '../../../../shared/utils/storybook';
+import { withProviders } from '../../../../utils/storybook';
 import { Skeleton } from './skeleton.component';
 
 const Container = styled.div`

packages/webapp/src/routes/documents/documents.stories.tsx → packages/webapp-libs/webapp-documents/src/routes/documents/documents.stories.tsx

@@ -2,7 +2,7 @@ import { Story } from '@storybook/react';
 import { append } from 'ramda';
 
 import { fillDocumentsListQuery } from '../../tests/factories';
-import { withProviders } from '../../shared/utils/storybook';
+import { withProviders } from '../../utils/storybook';
 import { Documents } from './documents.component';
 
 const Template: Story = () => {

packages/webapp-libs/webapp-documents/src/routes/index.ts

@@ -0,0 +1,3 @@
+import { asyncComponent } from '@sb/webapp-core/utils/asyncComponent';
+
+export const Documents = asyncComponent(() => import('./documents'));

packages/webapp-libs/webapp-documents/src/tests/factories/index.ts

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

packages/webapp-libs/webapp-documents/src/tests/setupTests.ts

@@ -0,0 +1,2 @@
+import '@sb/webapp-api-client/tests/setupTests';
+import '@sb/webapp-core/tests/setupTests';

packages/webapp-libs/webapp-documents/src/tests/utils/rendering.tsx

@@ -0,0 +1,56 @@
+import * as apiUtils from '@sb/webapp-api-client/tests/utils/rendering';
+import * as corePath from '@sb/webapp-core/utils/path';
+import { RenderOptions, render, renderHook } from '@testing-library/react';
+import { ComponentClass, ComponentType, FC, ReactElement } from 'react';
+import { MemoryRouterProps, generatePath } from 'react-router';
+
+export type WrapperProps = apiUtils.WrapperProps;
+
+export function getWrapper(
+  WrapperComponent: ComponentClass<apiUtils.ApiTestProvidersProps> | FC<apiUtils.ApiTestProvidersProps>,
+  wrapperProps: WrapperProps
+): {
+  wrapper: ComponentType<apiUtils.WrapperProps>;
+  waitForApolloMocks: (mockIndex?: number) => Promise<void>;
+} {
+  return apiUtils.getWrapper(apiUtils.ApiTestProviders, wrapperProps);
+}
+
+export type CustomRenderOptions = RenderOptions & WrapperProps;
+
+function customRender(ui: ReactElement, options: CustomRenderOptions = {}) {
+  const { wrapper, waitForApolloMocks } = getWrapper(apiUtils.ApiTestProviders, options);
+
+  return {
+    ...render(ui, {
+      ...options,
+      wrapper,
+    }),
+    waitForApolloMocks,
+  };
+}
+
+function customRenderHook<Result, Props>(hook: (initialProps: Props) => Result, options: CustomRenderOptions = {}) {
+  const { wrapper, waitForApolloMocks } = getWrapper(apiUtils.ApiTestProviders, options);
+
+  return {
+    ...renderHook(hook, {
+      ...options,
+      wrapper,
+    }),
+    waitForApolloMocks,
+  };
+}
+
+export { customRender as render, customRenderHook as renderHook };
+
+export const createMockRouterProps = (pathName: string, params?: Record<string, any>): MemoryRouterProps => {
+  return {
+    initialEntries: [
+      generatePath(corePath.getLocalePath(pathName), {
+        lang: 'en',
+        ...(params ?? {}),
+      }),
+    ],
+  };
+};

packages/webapp-libs/webapp-documents/src/utils/storybook.tsx

@@ -0,0 +1,16 @@
+import { ApiTestProviders } from '@sb/webapp-api-client/tests/utils/rendering';
+import { Story } from '@storybook/react';
+
+import { WrapperProps, getWrapper } from '../tests/utils/rendering';
+
+export function withProviders(wrapperProps: WrapperProps = {}) {
+  return (StoryComponent: Story) => {
+    const { wrapper: WrapperComponent } = getWrapper(ApiTestProviders, wrapperProps);
+
+    return (
+      <WrapperComponent {...wrapperProps}>
+        <StoryComponent />
+      </WrapperComponent>
+    );
+  };
+}

packages/webapp-libs/webapp-documents/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}