BA-2192: mobile features into packages

.scripts/copy-dts.js

@@ -0,0 +1,41 @@
+const fs = require('fs')
+const path = require('path')
+const { promisify } = require('util')
+
+const mkdir = promisify(fs.mkdir)
+const copyFile = promisify(fs.copyFile)
+const readdir = promisify(fs.readdir)
+
+async function* walk(dir) {
+  const entries = await readdir(dir, { withFileTypes: true })
+  for (const entry of entries) {
+    const res = path.resolve(dir, entry.name)
+    if (entry.isDirectory()) {
+      yield* walk(res)
+    } else {
+      yield res
+    }
+  }
+}
+
+async function copyDTS() {
+  const declarationsDir = path.join(process.cwd(), 'tmp-dts')
+  const distDir = path.join(process.cwd(), 'dist')
+
+  for await (const filePath of walk(declarationsDir)) {
+    if (filePath.endsWith('.d.ts')) {
+      // Convert: tmp-dts/modules/.../file.d.ts → dist/.../file.d.ts
+      const relativePath = path.relative(declarationsDir, filePath)
+      const destPath = path.join(
+        distDir, 
+        relativePath.replace(/^modules\//, '')
+      )
+
+      await mkdir(path.dirname(destPath), { recursive: true })
+      await copyFile(filePath, destPath)
+    }
+  }
+  console.log('Declaration files copied. 😉')
+}
+
+copyDTS().catch(console.error)

packages/authentication/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/authentication
 
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.3
+
 ## 4.1.3
 
 ### Patch Changes

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -14,37 +14,37 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@hookform/resolvers": "catalog:",
-    "@tanstack/react-query": "catalog:",
-    "jotai": "catalog:",
-    "js-cookie": "catalog:",
-    "react-hook-form": "catalog:",
-    "zod": "catalog:"
+    "@hookform/resolvers": "3.6.0",
+    "@tanstack/react-query": "5.45.1",
+    "jotai": "2.9.3",
+    "js-cookie": "3.0.5",
+    "react-hook-form": "7.51.5",
+    "zod": "3.24.1"
   },
   "peerDependencies": {
     "@baseapp-frontend/utils": "workspace:*",
-    "react": "catalog:react18"
+    "react": "18.3.1"
   },
   "devDependencies": {
     "@baseapp-frontend/config": "workspace:*",
     "@baseapp-frontend/eslint-plugin": "workspace:*",
     "@baseapp-frontend/test": "workspace:*",
     "@baseapp-frontend/tsconfig": "workspace:*",
-    "@faker-js/faker": "catalog:test",
-    "@testing-library/jest-dom": "catalog:test",
-    "@testing-library/react": "catalog:test",
-    "@testing-library/user-event": "catalog:test",
-    "@types/jest": "catalog:test",
-    "@types/js-cookie": "catalog:",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:react18",
-    "@types/react-dom": "catalog:react18",
-    "babel-jest": "catalog:test",
-    "jest": "catalog:test",
-    "jest-environment-jsdom": "catalog:test",
-    "ts-jest": "catalog:test",
-    "ts-node": "catalog:test",
-    "typescript": "catalog:"
+    "@faker-js/faker": "^9.0.3",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "16.0.0",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "29.5.12",
+    "@types/js-cookie": "3.0.6",
+    "@types/node": "22.7.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "babel-jest": "29.7.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "ts-jest": "29.1.4",
+    "ts-node": "10.9.2",
+    "typescript": "5.4.5"
   },
   "license": "MIT",
   "repository": {

packages/components/.eslintrc.js

@@ -1 +1 @@
-module.exports = require('@baseapp-frontend/config/.eslintrc.js')
+module.exports = require('@baseapp-frontend/config/.eslintrc-with-restricted-paths.js')

packages/components/.gitignore

@@ -58,4 +58,11 @@ cypress/downloads
 .sentryclirc
 
 # editorconfig
-.editorconfig
+.editorconfig
+
+# relay
+/__generated__
+
+# babel & tsc
+/tmp-babel
+/tmp-dts

packages/components/.storybook/__mocks__/navigation.tsx

@@ -1,4 +1,9 @@
-import { FavoriteIcon, MentionIcon, MenuIcon, PenEditIcon } from '@baseapp-frontend/design-system'
+import {
+  FavoriteIcon,
+  MentionIcon,
+  MenuIcon,
+  PenEditIcon,
+} from '@baseapp-frontend/design-system/components/web/icons'
 
 export const navDataMock = [
   {

packages/components/.storybook/__mocks__/theme.ts

@@ -1,19 +1,17 @@
+import { ThemeProviderProps } from '@baseapp-frontend/design-system/providers/web'
 import {
-  ThemeProviderProps,
   breakpoints,
   createCustomShadows,
   createPalette,
   createShadows,
-  primaryFont,
-  secondaryFont,
   typography,
-} from '@baseapp-frontend/design-system'
+} from '@baseapp-frontend/design-system/styles/web'
 
 const defaultTheme: ThemeProviderProps = {
   palette: createPalette('light'),
   breakpoints: breakpoints,
-  primaryFont: primaryFont,
-  secondaryFont: secondaryFont,
+  primaryFont: undefined,
+  secondaryFont: undefined,
   settings: {
     themeMode: 'light',
     themeContrast: 'default',

packages/components/.storybook/decorators/withProviders.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 
-import { LoadingState, ThemeProvider } from '@baseapp-frontend/design-system'
+import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays'
+import { ThemeProvider } from '@baseapp-frontend/design-system/providers/web'
 import { RelayTestProvider, createTestEnvironment } from '@baseapp-frontend/graphql'
 import { NotificationProvider } from '@baseapp-frontend/utils'
 

packages/components/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @baseapp-frontend/components
 
+## 1.0.0
+
+### Major Changes
+
+- Rearrange each `module` code into folders, `common` for multi-platform code, `native` for native code and `web` for web code.
+- Transpile and bundle the package code using `babel`, `tsup` and `tsc`.
+- Migrate native `profile` components from the template into this package.
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.0.0
+  - @baseapp-frontend/utils@3.1.3
+  - @baseapp-frontend/authentication@4.1.4
+  - @baseapp-frontend/graphql@1.2.4
+
 ## 0.0.58
 
 ### Patch Changes

packages/components/README.md

@@ -18,10 +18,64 @@ pnpm install @baseapp-frontend/components
 
 ## **What is in here?**
 
-This package contains essential BaseApp components such as `Comments`, `Notifications` and `Navigation`. It also includes Storybook, a tool for component documentation and visualization. To run the Storybook locally, navigate to the package folder and run the following command:
+This package contains essential BaseApp modules such as `comments`, `notifications`, `messages` and `navigations`. It also includes Storybook, a tool for component documentation and visualization. To run the Storybook locally, navigate to the package folder and run the following command:
 
 ```bash
-cd packages/components
+# at root level
 
-yarn storybook
+pnpm storybook --filter components
 ```
+
+## **Build Process**
+
+We use a hybrid build pipeline combining `Babel`, `tsup`, and `TypeScript Compiler` to balance type accuracy, Relay compatibility, and modern bundling:
+
+1. **Source Code:** Original TypeScript/React files with Relay GraphQL queries.
+
+2. **Babel Transformation:**
+
+    * Transpiles TypeScript to JavaScript.
+
+    * Applies Relay compiler transformations (replaces graphql tags with artifact imports).
+
+    * Outputs processed files to a temporary directory `tmp-babel`.
+
+3. **tsup Bundling:**
+
+    * Bundling tool (using esbuild) consumes the `tmp-babel` files.
+
+    * Generates ESM and CJS bundles in `dist`.
+
+4. **TypeScript Compiler (tsc):**
+
+    * Runs in parallel to generate .d.ts type declarations.
+
+    * Outputs declarations to `tmp-dts`.
+
+5. **Merge Outputs:**
+
+    * Copies type declarations from `tmp-dts` to `dist`.
+
+    * Final `dist` contains both runtime bundles and accurate type definitions.
+
+### Pros
+One of the biggest wins with this setup is that it leverages tsc to generate type declarations. It is both reliable and fast—even for large projects—so we get accurate types without the performance hit we might see with other solutions.
+
+On the Relay side, using Babel with the official Relay plugin is way more reliable, since it's battle-tested than any custom solution we might try, especially since tools like tsup or esbuild just aren’t built to handle Relay’s GraphQL transformations on their own.
+
+Plus, we still benefit from dual module output (ESM and CJS) along with optimized, compact bundles produced by esbuild and other cool features tsup provides.
+
+### Cons
+That said, the build process is a bit more complex since it involves multiple tools running in parallel—Babel for the Relay transformations, tsup for bundling, and tsc for type declarations.
+
+Coordinating these steps and managing temporary directories can add some overhead to our build process. Even though relying on tsc for declarations is much faster than using tsup’s dts process for large projects, the overall pipeline is still more intricate compared to a single-tool solution. This added complexity means there’s a bit more to maintain and tweak as any of these tools evolve.
+
+Furthermore, as the tsup bundling process becomes more complex—for example, if we introduce tree shaking we might need to reconsider how we generate our type declarations, since the current tsc setup may not perfectly align with those bundling features.
+
+### Alternatives Considered
+
+We did explore a few different strategies. A pure tsup/ESBuild pipeline is certainly simpler and can offer faster builds in some cases, but it falls short when it comes to Relay support—neither tsup nor esbuild can handle Relay’s GraphQL transforms without help, and their built-in dts generation isn’t as speedy as tsc on larger codebases.
+
+A Babel-only setup was another option, and while it can handle Relay transformations using the official plugin, it tends to produce larger bundles and doesn’t offer the flexibility of generating both ESM and CJS outputs and others features provided by tsup.
+
+In the end, the hybrid approach was chosen because it strikes the best balance between reliability, performance, and compatibility—even if it means juggling a few more moving parts.