# @pagopa/pagopa-editorial-components

> [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

Latest version **4.0.0** (published 2024-04-03) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @pagopa/pagopa-editorial-components
pnpm add @pagopa/pagopa-editorial-components
yarn add @pagopa/pagopa-editorial-components
bun add @pagopa/pagopa-editorial-components
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-04-03 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.10.0 |
| Dependencies | 4 |
| Unpacked size | 985.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | PagoPA |
| Maintainers | pp-ps, pasqualedevita, gunzip, balanza, pagopa-bot |

## Links

- npm: https://www.npmjs.com/package/@pagopa/pagopa-editorial-components
- Repository: https://github.com/pagopa/pagopa-editorial-components
- Homepage: https://github.com/pagopa/pagopa-editorial-components#readme
- Issues: https://github.com/pagopa/pagopa-editorial-components/issues
- npm.io page: https://npm.io/package/@pagopa/pagopa-editorial-components

## Dependencies (4)

- [@pagopa/mui-italia](https://npm.io/package/@pagopa/mui-italia.md) ^0.8.12
- [react-swipeable-views](https://npm.io/package/react-swipeable-views.md) ^0.14.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^6.1.4
- [react-swipeable-views-utils](https://npm.io/package/react-swipeable-views-utils.md) ^0.14.0

## Recent versions

- 4.0.0 (latest) — 2024-04-03
- 3.2.0 — 2024-04-02
- 3.1.4 — 2024-04-02
- 3.1.3 — 2024-04-02
- 3.1.2 — 2024-03-26
- 3.1.1 — 2024-03-12
- 3.1.0 — 2024-03-07
- 3.0.0 — 2024-03-06
- 2.3.3 — 2024-03-05
- 2.3.2 — 2024-02-23
- 2.3.1 — 2024-02-21
- 2.3.0 — 2024-02-16
- 2.2.0 — 2024-02-12
- 2.1.4 — 2024-01-29
- 2.1.3 — 2023-07-07
- … 19 more at https://npm.io/package/@pagopa/pagopa-editorial-components/versions

## README

[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

# pagoPA Editorial Components
A react component library to be used to compose pagoPa product pages based on [MUI italia](https://github.com/pagopa/mui-italia)

## Installation
To add this package to your `package.json` run in your terminal:
```console
// with npm
$ npm install @pagopa/pagopa-editorial-components
// with yarn
$ yarn add @pagopa/pagopa-editorial-components
```

## Usage
```jsx
import { Hero } from "@pagopa/pagopa-editorial-components";
  ....
  <Hero ... />
  ....
```

## Storybook
A storybook is available at this [address](http://pagopa.github.io/pagopa-editorial-components). 

### CLI Commands
Here's an explanation of the commands you can find in the `package.json`:
* `build`: It compiles the entire library project using the relative `tsconfig.json` file. We use it to release new versions
* `storybook`: It launches a local Storybook application using 6006 port. We use it when new developments are required
* `build-storybook`: It outputs a static Storybook in the `storybook-static` folder. We use it to deploy and upadate the online storybook
* `test`: It runs unit tests for the library components

### How to Contribute
Any critiques and suggestions are welcome.
All components in this package should be generic enough to be used in different applications and use cases. 
In this sense, if you have any doubts or aren't sure, please ask your fellow designer. With that said, you basically 
have two options starting from the design project:

#### Build the generic component (easy abstraction)
1. Take the time to make a proper analysis of the component's possible props.
2. Ask your fellow developers/designers for comments or criticism
3. Build it, according to the provided guidelines (see below)
4. Test all its possible combinations, using Storybook or similar playground

#### Provide a sample of how to compose the component (hard abstraction)
1. Compose the component using the available components provided by the library
2. Add a specific story to the Storybook, under the Composition section

#### Either way, you must follow these guidelines:

* Visual consistency
* If possible, avoid magic numbers.
* Use the provided visual attributes (color, spacing, etc…), using the corresponding theme file
* If you have to use some values not provided by the theme object:
  - Ask your fellow designer for clarification
  - If necessary, extend it.
* The components must be responsive by default

#### Accessibility
- Ensure that the new components are accessible to all users. To avoid reinventing the wheel, take advantage of the MUI base components.
- Try to perform the actions using only the keyboard.

If you feel pretty confident, you can [open a Pull Request](https://github.com/pagopa/pagopa-editorial-components/pulls)

---
_Source: https://npm.io/package/@pagopa/pagopa-editorial-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._