feat: add shared package to pdf templates to render in the server and client side

packages/server/package.json

@@ -24,6 +24,7 @@
     "@aws-sdk/s3-request-presigner": "^3.583.0",
     "@bigcapital/utils": "*",
     "@bigcapital/email-components": "*",
+    "@bigcapital/pdf-templates": "*",
     "@casl/ability": "^5.4.3",
     "@hapi/boom": "^7.4.3",
     "@lemonsqueezy/lemonsqueezy.js": "^2.2.0",

packages/webapp/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@bigcapital/utils": "*",
+    "@bigcapital/pdf-templates": "*",
     "@blueprintjs-formik/core": "^0.3.6",
     "@blueprintjs-formik/datetime": "^0.3.7",
     "@blueprintjs-formik/select": "^0.3.5",

shared/pdf-templates/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

shared/pdf-templates/.storybook/main.tsx

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

shared/pdf-templates/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

shared/pdf-templates/.storybook/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+
+const app = async (): Promise<UserConfigExport> => {
+  return defineConfig({
+    plugins: [react()],
+    css: {
+      postcss: {
+        plugins: [tailwindcss],
+      },
+    },
+  });
+};
+// https://vitejs.dev/config/
+export default app;

shared/pdf-templates/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

shared/pdf-templates/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@bigcapital/pdf-templates",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "main": "./dist/components.umd.js",
+  "module": "./dist/components.es.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/components.es.js",
+      "require": "./dist/components.umd.js"
+    }
+  },
+  "dependencies": {
+    "@emotion/cache": "^11.13.1",
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/server": "^11.11.0",
+    "@types/lodash": "^4.17.13",
+    "@xstyled/emotion": "^3.8.1",
+    "@xstyled/system": "^3.8.1",
+    "classnames": "^2.3.2",
+    "css-loader": "^6.x",
+    "declaration-bundler-webpack-plugin": "^1.0.3",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "lodash": "^4.17.15",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "style-loader": "^3.x",
+    "tailwindcss": "^3.4.14",
+    "ts-loader": "^9.x",
+    "webpack": "^5.x",
+    "webpack-cli": "^5.x"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "7.2.2",
+    "@storybook/addon-interactions": "7.2.2",
+    "@storybook/addon-links": "7.2.2",
+    "@storybook/addon-styling": "1.3.6",
+    "@storybook/blocks": "7.2.2",
+    "@storybook/react": "7.2.2",
+    "@storybook/testing-library": "0.2.0",
+    "@types/react": "18.3.4",
+    "@types/react-dom": "18.3.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "eslint-plugin-storybook": "0.6.13",
+    "globals": "^15.11.0",
+    "storybook": "7.2.2",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.10.0"
+  }
+}

shared/pdf-templates/postman.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

shared/pdf-templates/src/Test.tsx

@@ -0,0 +1,3 @@
+export const Test = () => {
+  return <h1>asdasd</h1>;
+};

shared/pdf-templates/src/index.ts

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

shared/pdf-templates/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

shared/pdf-templates/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

shared/pdf-templates/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // "noEmit": true,
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "types": ["vitest/globals"],
+    "resolveJsonModule": true,
+    "outDir": "dist",
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

shared/pdf-templates/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

shared/pdf-templates/vite.config.ts

@@ -0,0 +1,61 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+import dts from 'vite-plugin-dts';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+import { name } from './package.json';
+
+const app = async (): Promise<UserConfigExport> => {
+  /**
+   * Removes everything before the last
+   * @octocat/library-repo -> library-repo
+   * vite-component-library-template -> vite-component-library-template
+   */
+  const formattedName = name.match(/[^/]+$/)?.[0] ?? name;
+
+  return defineConfig({
+    define: {
+      isBrowser: 'false', // This will replace isBrowser with false in the bundled code
+    },
+    ssr: {
+      noExternal: true,
+    },
+    plugins: [
+      react(),
+      dts({
+        insertTypesEntry: true,
+      }),
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwindcss],
+      },
+    },
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, 'src/lib/main.ts'),
+        name: formattedName,
+        formats: ['es', 'umd'],
+        fileName: (format: string) => `${formattedName}.${format}.js`,
+      },
+      rollupOptions: {
+        // external: ['react', 'react/jsx-runtime', 'react-dom', 'tailwindcss'],
+        // output: {
+        //   globals: {
+        //     react: 'React',
+        //     'react/jsx-runtime': 'react/jsx-runtime',
+        //     'react-dom': 'ReactDOM',
+        //     tailwindcss: 'tailwindcss',
+        //   },
+        // },
+      },
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+    },
+  });
+};
+// https://vitejs.dev/config/
+export default app;

shared/pdf-templates/webpack.config.js

@@ -0,0 +1,36 @@
+// webpack.config.js
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  target: 'node',
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'components.umd.js',
+    library: {
+      name: '@bigcapital/library-components',
+      type: 'umd',
+    },
+    globalObject: 'this',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        use: {
+          loader: 'ts-loader',
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+};