open-index/open-npm huggingface dataset:
npm package: @guardian/eslint-plugin-source-foundations
Description: ESLint plugin for Guardian projects using the `@guardian/source-foundations` package.
Latest version: 18.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@guardian/eslint-plugin-source-foundations`

> ESLint plugin for Guardian projects using the `@guardian/source-foundations` package.

This package is part of the [Source design system](/docs/source/README.md).

## Installation

```bash
yarn add -D @guardian/eslint-plugin-source-foundations
```

or

```bash
npm install --save-dev @guardian/eslint-plugin-source-foundations
```

## Usage

```js
// ESLint configuration file
{
    "extends": "plugin:@guardian/source-foundations/recommended"
}
```

## Rules

### Valid import path

This rules errors for imports from `@guardian/src-foundations` or any sub module. If possible, it will autofix the import to the new location.

Some breaking changes can not be autofixed, for example, in cases where the export has been removed from Source. Developers must manually provide an alternative.

### No \* imports or exports

This rule errors for import or export `*` statements from any `src-*` or `source-*` package as this pattern is not recommended.

### No duplicate imports

This rule, from [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import), errors when multiple import statements import from the same pacakge. These issues can be autofixed. This rule is included as, due to the remove of sub modules and the consolidation of component packages, many import statements are fixed by the `valid-import-path` rule to import from the same location in v4.

## Known Issues

- New theme names not always updated automatically

  The theme variables have changed both name and location in the v4. The plugin should automatically update both but sometimes this does not work.
npm package: @guardian/eslint-plugin-source-react-components
Description: ESLint plugin for Guardian projects using the `@guardian/source-react-components` package.
Latest version: 24.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@guardian/eslint-plugin-source-react-components`

> ESLint plugin for Guardian projects using the `@guardian/source-react-components` package.

This package is part of the [Source design system](/docs/source/README.md).

## Installation

```bash
yarn add -D @guardian/eslint-plugin-source-foundations @guardian/eslint-plugin-source-react-components
```

or

```bash
npm install --save-dev @guardian/eslint-plugin-source-foundations @guardian/eslint-plugin-source-react-components
```

## Usage

```js
// ESLint configuration file
{
    "extends": [
        "plugin:@guardian/source-foundations/recommended",
        "plugin:@guardian/source-react-components/recommended"
    ]
}
```

### Valid import path

This rules errors for imports from a `@guardian/src-*` package. If possible, it will autofix the import to the new location.

Some breaking changes can not be autofixed, for example, in cases where the export has been removed from Source. Developers must manually provide an alternative.

### No \* imports or exports

This rule errors for import or export `*` statements from any `src-*` or `source-*` package as this pattern is not recommended.

### No duplicate imports

This rule, from [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import), errors when multiple import statements import from the same pacakge. These issues can be autofixed. This rule is included as, due to the remove of sub modules and the consolidation of component packages, many import statements are fixed by the `valid-import-path` rule to import from the same location in v4.

## Known Issues

- New theme names not always updated automatically

  The theme variables have changed both name and location in the v4. The plugin should automatically update both but sometimes this does not work.
npm package: @guardian/flexible-frontend
Description: This project serves as the foundation for migrating Composer from AngularJS to React. The repository includes a Staging App and a reusable Component Library, both implemented in React with TypeScript. Additionally, components from the new library are inte
Latest version: 0.1.2

# Flexible Frontend

This project serves as the foundation for migrating Composer from AngularJS to React. The repository includes a Staging App and a reusable Component Library, both implemented in React with TypeScript. Additionally, components from the new library are integrated into the legacy AngularJS app using the React2Angular library.

## Staging App

Overview

The Staging App provides a controlled environment for testing and developing & integrating components from the library to replace existing logic & interface elements in Composer. It is designed to be the starting point for the migration process, ensuring a smooth transition from AngularJS to React.

## Getting Started

### Install dependencies

```bash
cd flexible-frontend
nvm use
npm i
```

Complete the nginx setup by running `./setup.sh` from the flexible-content directory root

### Run the app

```bash
./scripts/dev-start.sh
```

the staging app should be available at [https://composer.local.dev-gutools.co.uk](https://composer.local.dev-gutools.co.uk)

## Testing

The Staging App is unit-tested using React Testing Library. Run the tests with:

```bash
npm run test
```

### Accessibility Testing

Accessibility testing is performed using the `axe-playwright` library. Run the tests with:

```bash
npm run axe-tests
```

### Visual Testing

Changes to the component library should be tested visually using Chromatic. Add the `run_cromatic` label to a pull request to trigger a visual test run. Note that the `run_chromatic` action is not triggered on github if the branch has merge conflicts with main.

Visit the [Chromatic dashboard](https://www.chromatic.com/builds?appId=65569b6bc120a11299938636) for visual test results.

## Component Library

### Overview

The Component Library is a collection of reusable React components developed with TypeScript. These components are designed to be shared between the Staging App and the existing AngularJS application.

### Viewing existing components

```bash
cd flexible-frontend
nvm use
npm i
npm run storybook
```

The components with be available at [http://localhost:6006](http://localhost:6006)

## React2Angular Integration

Components from the new library are integrated into the legacy AngularJS app using the React2Angular library. This allows seamless usage of React components within the AngularJS application and for new feature development in the legacy app to be built in the component library.