- [readable-time](#readable-time) - [Overview](#overview) - [General](#general) - [Purpose](#purpose) - [Detailed description](#detailed-description) - [Usage](#usage) - [Running commands](#running-commands) - [Available commands](#available-commands) - [Ownership](#ownership) - [Translations](#translations) # readable-time This library was generated with [@box/automation](../../automation//README.md). General overview on how to perform tasks on the generated library can be found in [run-tasks](https://nx.dev/core-features/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](https://blueprint.dev.box.net/?path=/docs/shared-features_shared-features-readabletime-docs--docs). ### Usage Duality of readable-time is that it can be used as a component or as a function. ```typescript import { ReadableTime } from '@box/readable-time'; const App = () => { return ; }; ``` ```typescript 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 | | | 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 lint readable-time` - runs 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](https://box.chromatic.com/) , 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 Per-locale `i18n/*.js` files are generated and committed by the Moji Jenkins pipeline. The shared-feature builder copies them into `dist/i18n/` during `build`. Consuming applications list this package in `i18n.config.js` under `translationDependencies`.