Skip to content

Commit

Permalink
Merge pull request #2101 from genesiscommunitysuccess/WJH/PTL-1789
Browse files Browse the repository at this point in the history
Wjh/ptl 1789: check why last reset does not include latest changes
  • Loading branch information
wjhendry authored Feb 2, 2025
2 parents c1584e2 + 4f524e5 commit a78133d
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 50 deletions.
27 changes: 12 additions & 15 deletions docs/001_develop/03_client-capabilities/010_filters/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,31 @@ import FiltersDemo from '../../../../examples/ui/client-capabilities/filters/fil
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Genesis Foundation Filters

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)

`foundation-filters` provides a collection of client-side filters.

Client-side filters in Genesis allow users to filter and process data locally within the web application. They may also access runtime data or state to provide an outcome. These filters, including options like `userTargeting` and `timeWindow`, enable customized data manipulation directly in the browser, enhancing responsiveness by reducing server requests.

Client-side filters generally take primitive input parameters, and return `true` or `false` based on these values. They can be combined using the [ClientFilterRunner](./docs/api/foundation-filters.runner.md) utility provided in the `foundation-filters` package to create layered filtering conditions for complex data scenarios. When a filter is used without all the input parameters needed, Genesis logs a warning and returns `true` by convention so that the chain can continue.

## API Documentation
Client-side filters generally take primitive input parameters, and return `true` or `false` based on these values. You can combine them using the [ClientFilterRunner](./docs/api/foundation-filters.runner.md) utility provided in the `foundation-filters` package to create layered filtering conditions for complex data scenarios. When a filter is used without all the input parameters needed, Genesis logs a warning and returns `true` by convention so that the chain can continue.

For more detailed information on API and configurations, please refer to the [API documentation](./docs/api/index.md) in the `docs/api` directory.
## API documentation

For more detailed information on API and configurations, see the [API documentation](./docs/api/index.md).

## Example
Lets look at an example of one of the many filters in this module, the `timeWindow` filter. Further examples are shown below.
Here is an example of one of the many filters in this module, the `timeWindow` filter.

<FiltersDemo />

<br/>

Each filter is provided in two flavours:
1. Functions
2. Dependency Injection (DI)
2. Dependency injection (DI)

These flavours are explained in detail below with help of code examples
These flavours are explained in detail below with help of code examples.

<Tabs defaultValue="DI" values={[ { label: 'Dependency Injection (DI)', value: 'DI', },{ label: 'Function', value: 'function', }]}>
<TabItem value="function">
Expand Down Expand Up @@ -120,7 +117,7 @@ data or state from the application it needs to provide its outcome. The DI versi

## Available filters

Here is a list of available filters in Genesis's `foundation-filters` package:
Here is a list of available filters in the `foundation-filters` package:

* [nodeEnv](./docs/api/foundation-filters.nodeenvfilter.md): This filter is used to match the current environment (production, development etc.) with the environment specified (passed as function param). It is useful for supporting environment-specific conditions ensuring that certain features are only available for targetted environment.
* [percentage](./docs/api/foundation-filters.percentagefilter.md): The percentage filter in Genesis foundation filters checks if a randomly generated number between 0 and 100 is within a specified percentage threshold. This allows for setting probabilistic conditions, enabling features or elements to be displayed to a proportion of users based on the given percentage. This filter is useful for scenarios like A/B testing or gradually rolling out new features.
Expand Down Expand Up @@ -182,7 +179,7 @@ Let's take a closer look at each filter, understanding their usage with the help
### `nodeEnv`
The nodeEnv filter in Genesis’s foundation filters checks the current application environment (such as "development," "production," etc.) and returns true if the filter’s specified environment matches the current one. This filter ensures that certain features or configurations are available only in intended environments by managing environment-specific conditions.

Lets look at the usage examples as function and when used with DI:
Look at the usage examples as function and when used with DI:

<Tabs defaultValue="DI" values={[ { label: 'Dependency Injection (DI)', value: 'DI', },{ label: 'Function', value: 'function', }]}>
<TabItem value="function">
Expand Down Expand Up @@ -211,7 +208,7 @@ import { NodeEnv } from '@genesislcap/foundation-filters';
const outcome = this.nodeEnv.isDevelopment;
```

you can find other available API for nodeEnv in the [API Docs](./docs/api/index.md)
You can find other the available API for nodeEnv in the [API Docs](./docs/api/index.md).

### `percentage`
The percentage filter in Genesis foundation filters checks if a randomly generated number between 0 and 100 is within a specified percentage threshold. This allows for setting probabilistic conditions, enabling features or elements to be displayed to a proportion of users based on the given percentage. This filter is useful for scenarios like A/B testing or gradually rolling out new features.
Expand Down Expand Up @@ -246,7 +243,7 @@ The percentage filter allows you to display certain features or messages to a se
### `timeWindow`
This filter is used to check whether the current date and time fall between the specified start and end period.The filter returns true if the current date and time is within the specified range. `timeWindow` filter can be helpful when you want to manipulate data within a specific time frame.

Lets look at the usage examples as function and with DI:
Look at the usage examples as function and with DI:

<Tabs defaultValue="DI" values={[ { label: 'Dependency Injection (DI)', value: 'DI', },{ label: 'Function', value: 'function', }]}>
<TabItem value="function">
Expand Down Expand Up @@ -292,7 +289,7 @@ This filter will return true when the current URL matches on **ANY** of the par
This filter helps in targeting specific URLs based on these parameters, which can be extremely useful for restricting or enabling features based on URL parameters or domains.
For example, you could use the filter to only allow access to certain content when the URL matches a secure HTTPS connection on specific hosts, like `https://test.genesislab.global`.

Lets look at the usage examples as function and with DI:
Look at the usage examples as function and with DI:
<Tabs defaultValue="DI" values={[ { label: 'Dependency Injection (DI)', value: 'DI', },{ label: 'Function', value: 'function', }]}>
<TabItem value="function">
```ts
Expand Down Expand Up @@ -327,7 +324,7 @@ Lets look at the usage examples as function and with DI:
### `userAgent`
The `userAgent` filters content on the basis of user’s browser, device, operating system (OS), or specific user agent string parameters. It allows user to specify which browsers(e.g. Chrome, Firefox), devices (e.g., mobile or desktop), or OS (e.g., IOS, Windows) have access to certain features. You can use this filter for providing tailored experience on the basis of user's environment for instance customizing content for a specic browser or device.

Lets look at the usage examples as function and with DI:
Look at the usage examples as function and with DI:
<Tabs defaultValue="DI" values={[ { label: 'Dependency Injection (DI)', value: 'DI', },{ label: 'Function', value: 'function', }]}>
<TabItem value="function">
```ts
Expand Down
Loading

0 comments on commit a78133d

Please sign in to comment.