npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pagopa/pagopa-editorial-components

v4.0.0

Published

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

Downloads

33

Readme

semantic-release: angular

pagoPA Editorial Components

A react component library to be used to compose pagoPa product pages based on MUI italia

Installation

To add this package to your package.json run in your terminal:

// with npm
$ npm install @pagopa/pagopa-editorial-components
// with yarn
$ yarn add @pagopa/pagopa-editorial-components

Usage

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

Storybook

A storybook is available at this address.

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