Pro Ask FT kit

This package contains the Shared utils between App and Web versions & UI components for App version, which will give us the freedom to develop our components in isolation using TS & React giving us a better DevX

Install pro-ask-ft-kit

npm install @financial-times/pro-ask-ft-kit

Structure

lib/
├── components/
│   └── mobile/        # components for mobile app
│   └── web/           # components for the web app
├── hooks/             # shared hooks
└── utils/             # shared util functions

Tools

• The project is using storybook for better development experience for the components
• Vite for faster load time

Contribution

Setup

Installation

1. Clone the repository

2. Install the dependencies by running

npm install

To install the app's dependencies you will need to configure npm authentication for Cloudsmith. The .npmrc file tells NPM to fetch its dependencies from FT's Cloudsmith registry. To configure Npm to use a Cloudsmith repository rather than the default npmjs index is to configure the registry property in your .npmrc file:

registry=https://npm.packages.ft.com/financial-times-internal-releases/
//npm.packages.ft.com/financial-times-internal-releases/:_authToken={CLOUD_SMITH_USER_AUTH_TOKEN}

Read this Tech Hub guide for more information about this, and how to get access to it if you're having trouble.

Build

To build the components, run:

npm run build

The output will be located in the /dist folder.

🔗 NPM Linking with the ft-app

Currently pro-ask-ft-kit mobile components are used on the ft-app. To develop and test pro-ask-ft-kit components inside the ft-app, follow these steps:

1. Set Up ft-app

If you haven’t already, set up the ft-app locally by following one of the guides below:

• ft-app README – Quick Start Guide
• Confluence – Setting up dev environment

2. Link the Package

In your local pro-ask-ft-kit project folder, run:

npm link

This will create a global symlink for the package.

3. Link Inside ft-app

In the root of your local ft-app project, run:

npm link @financial-times/pro-ask-ft-kit

This links the globally symlinked version of pro-ask-ft-kit into ft-app.

You do not need to re-link after making changes to the package.

4. Build and Run

• Run the ft-app locally using npm run start
• Every time you make changes to pro-ask-ft-kit:
  • rebuild it with npm run build command
  • restart the ft-app to see your updates reflected

🛠 Alternative: Manual Install

If symlinking via npm link does not work correctly, use this alternative:

npm install ../pro-ask-ft-kit

Run this from the root of ft-app, adjusting the relative path if necessary. This will install the local package directly without symlinking.

📚 Storybook

• Run storybook: npm run storybook
• Access Storybook in your browser at: http://127.0.0.1:6006/ or http://localhost:6006/

🧪 Testing

To run tests, use the following command:

npm run test

🚀 Publishing a new version

After merging a pull request with a new feature or fix, publish a new version to NPM:

1. Make sure you're on main branch: git checkout main

2. To publish a new version npm run bump:(patch/minor/major)

   • patch: Fixes bugs in a backward-compatible way.
   • minor: Adds new, backward-compatible functionality.
   • major: Introduces breaking changes that are not backward compatible.

3. Run git push --follow-tags to push the new version to GitHub

   • it will trigger the CircleCI pipeline that publishes the new version on NPM.
   • it will update the version in package.json file