• readable-time
  • Overview
    • General
    • Purpose
    • Detailed description
    • Usage
  • Running commands
  • Available commands
  • Ownership
  • Translations

readable-time

This library was generated with @box/automation. General overview on how to perform tasks on the generated library can be found in run-tasks Nx documentation

Overview

General

The readable-time Shared Feature exports a ReadableTime React component and a pure getReadableTime function that formats a timestamp into a human-readable string. All the logic related to time is encapsulated in the getReadableTime function, while the ReadableTime component uses it to display the formatted timestamp in the UI.

readable-time returns/shows relative times (e.g., "2 hours ago") or absolute dates (e.g., "Oct 5, 2018") based on the provided properties and the current date.

Both the component and the function are internationalized using react-intl to support multiple languages and locales. The ReadableTime component gets the intl object from the React context, while the getReadableTime function receives it as a parameter.

Purpose

The primary purpose of the readable-time Shared Feature is to format and display timestamps in a way that is easy for users to understand. It can handle various scenarios such as showing the time for today, yesterday, or a specific date, and can include the time of day if required.

Detailed description

Detailed description of the component can be found in src/lib/stories/additional-description.md file. Additional information is also available in Blueprint documentation at Readable Time page.

Usage

Duality of readable-time is that it can be used as a component or as a function.

import { ReadableTime } from '@box/readable-time';

const App = () => {
    return <ReadableTime timestamp={1742817318888} />;
};

import { getReadableTime } from '@box/readable-time';
import { createIntl } from 'react-intl';

const intl = createIntl({ locale: 'en' });
const readableTime = getReadableTime({ timestamp: Date.now(), intl });

Running commands

Your terminal should stay in location of root directory of repository, which is frontend-mono. That Allows Nx to run action against your project, or multiple project if that is necessary. Do not navigate to packages/group-shared-features/readable-time to run commands.

Commands for the project are run using syntax used by Nx:

Syntax: yarn nx <target name> <project name> <option overrides>
                      |              |                |
Example: yarn nx    test         products         --watch

Available commands

All commands used with Nx can be found in project.json file within your package.

• nx storybook readable-time - launches development environment for UI component.
• nx build-storybook readable-time - build static version of storybook with all stories.
• nx build readable-time - build package using shared-feature-builder executor from automation package.
• nx build readable-time --watch - build package with --watch flag enabled, which rebuilds dist content based on changes in src
• nx build-locales readable-time - generate i18n/*.js and i18n/*.properties files out of i18n/json/*.json files to be imported by react-intl.
• nx lint readable-time - run linter over package files,
• nx test readable-time - runs storybook tests (visual/interactions) and jest unit tests, producing coverage report at the end.
• nx test-storybook readable-time - runs storybook tests. You need first to start storybook in separate terminal for this to work.
• nx test-storybook-local-coverage readable-time - runs storybook tests, and produces coverage report at the end. Requires running instance of storybook.
• nx test-storybook-ci readable-time - build storybook and run storybook tests with coverage output. Designed for CI usage.
• nx test-jest readable-time - runs jest unit tests, producing code coverage at the end.
• nx sonar readable-time - performs static analysis of code using SonarQube tooling, to detect bugs and code smells. Integrated as one of the steps in CI process.
• nx chromatic readable-time - uploads storybook build for review to box chromatic , and performs visual comparison of the UI changes against baseline.
• nx prepare readable-time - command run during package publication process orchestrated by Nx Release.

Ownership

Code of the feature belongs to Moji Team. Responsibilities of owning team include control over code quality, providing guidelines for changes, and alignment with other teams regarding changes. It would be a good practice to consult which team, owning or requesting, will be responsible for implementing changes to code.

Translations

For translations this package will be leveraging @box/frontend as it has the required scripts to do translations the Box way, for more information on this checkout their i18n docs here

The i18n/ dir is bundled with this package to enable the consuming app to use the translations included in this component it need to adjust it's TranslationsPlugin, see EUA's webpack.base.config.js and i18n.config.js for reference.