chore: temp setup block npm packages

libs/blocks/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/blocks/index.d.ts

@@ -0,0 +1 @@
+export * from '../../dist/libs/blocks/deriv-com-v2/libs/blocks/src/index'

libs/blocks/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@deriv-com/blocks",
+  "version": "0.0.5",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./style.css": "./style.css"
+  }
+}

libs/blocks/postcss.config.js

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

libs/blocks/project.json

@@ -12,6 +12,22 @@
         "lintFilePatterns": ["libs/blocks/**/*.{ts,tsx,js,jsx}"]
       }
     },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/blocks"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
     "test": {
       "executor": "@nx/vite:test",
       "outputs": ["{options.reportsDirectory}"],

libs/blocks/src/index.ts

@@ -1,3 +1,5 @@
+import './styles.scss';
+
 export * from './lib/stat';
 export * from './lib/navigation';
 export * from './lib/navigation/mobile/mobile.nav-toggle';

libs/blocks/src/styles.scss

@@ -0,0 +1,6 @@
+// @tailwind base;
+@tailwind components;
+@tailwind utilities;
+// @import '@deriv/quill-design/dist/quill-design.css';
+// @import '@deriv/quill-design/quill-tailwind/styles.css';
+// @import '@deriv/quill-design/quill-tailwind/fonts.css';

libs/blocks/tailwind.config.js

@@ -13,5 +13,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  presets: [require('../../tailwind.config.js')],
 };

libs/blocks/tsconfig.json

@@ -5,7 +5,8 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": ["vitest"]
+    "types": ["vite/client", "vitest"],
+    "resolveJsonModule": true
   },
   "files": [],
   "include": [],

libs/blocks/tsconfig.lib.json

@@ -5,18 +5,19 @@
     "types": [
       "node",
       "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
     ]
   },
   "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

libs/blocks/vite.config.ts

@@ -2,17 +2,52 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/blocks',
 
-  plugins: [react(), nxViteTsPaths()],
-
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+      // insertTypesEntry: true,
+    }),
+    react(),
+    nxViteTsPaths(),
+  ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
   // },
 
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'blocks',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'tailwind-merge',
+        '@deriv/quill-design',
+        '@deriv/quill-icons',
+        '@deriv-com/components',
+      ],
+    },
+    minify: false,
+  },
+
   test: {
     globals: true,
     cache: {

libs/components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@deriv-com/components",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

libs/components/project.json

@@ -12,6 +12,22 @@
         "lintFilePatterns": ["libs/components/**/*.{ts,tsx,js,jsx}"]
       }
     },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/components"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
     "test": {
       "executor": "@nx/vite:test",
       "outputs": ["{options.reportsDirectory}"],

libs/components/src/index.bundle.ts

@@ -0,0 +1,4 @@
+export * from './lib/cards-container';
+export * from './lib/card';
+export * from './lib/card-slider';
+export * from './lib/page-layout';

libs/components/tsconfig.json

@@ -5,7 +5,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": ["vitest"]
+    "types": ["vite/client", "vitest"]
   },
   "files": [],
   "include": [],

libs/components/tsconfig.lib.json

@@ -4,20 +4,20 @@
     "outDir": "../../dist/out-tsc",
     "types": [
       "node",
-
       "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
     ]
   },
   "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

libs/components/vite.config.ts

@@ -1,17 +1,47 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/components',
 
-  plugins: [react(), nxViteTsPaths()],
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      // skipDiagnostics: true,
+    }),
+    react(),
+    nxViteTsPaths(),
+  ],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.bundle.ts',
+      name: 'components',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'tailwind-merge',
+        '@deriv/quill-design',
+        '@deriv/quill-icons',
+        'swiper',
+      ],
+    },
+    minify: false,
+  },
 
   test: {
     globals: true,

libs/features/src/index.ts

@@ -1 +1 @@
-export * from './lib/navigation/';
+export * from './lib/navigation';

nx.json

@@ -21,11 +21,19 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
     },
     "test": {
-      "inputs": ["default", "^production"]
+      "inputs": [
+        "default",
+        "^production"
+      ]
     },
     "lint": {
       "inputs": [
@@ -45,7 +53,10 @@
     }
   },
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",