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 🙏

© 2026 – Pkg Stats / Ryan Hefner

vindi-design-system

v1.2.0

Published

Projeto de componentes da Vindi

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

design.systemdesign.system

Keywords

Readme

Vindi Design System

Um Design System é um conjuto de componentes reutilizáveis, documentos e testados.

Utilizamos React para manipular os componentes, Material UI como base e o Storybook para documentação.

Para publicar os componentes utilizamos o NPM.

Desenvolvimento

Esse projeto está configurado para ser executado através do docker-compose.

Serviço

Para iniciar o serviço utilize:

docker-compose up

Dependências

Para instalar novas dependências utilize:

docker-compose run --rm web npm install packpage-name

Para atualizar todas as dependências utilize:

docker-compose run --rm web npm install

Deploy

O deploy do Design System é dividido em duas partes, publicação no NPM e deploy do Storybook.

Antes da publicação ou deploy, altere a versão do packpage.json e execute os comandos abaixo:

docker-compose up
docker-compose exec web npm run build
Publicação no NPM

Antes da publicação é necessário fazer login no NPM, utilize:

docker-compose exec web npm login

Após inserir as credenciais de acesso, execute o comando abaixo:

docker-compose exec web npm publish --access public

Pronto, uma nova versão do Design System deve ter sido publicada.

Utilize o docker-compose exec para fazer a publicação, pois o docker-compose run --rm perde a referência do login.

Deploy Storybook

O Storybook é um livro de histórias que conta todos os estados possíveis de um componente, é uma documentação para o desenvolvedor.

Para realizar o deploy é necessário configurar o AWS CLI, para isso vai ser necessário criar chaves de acesso ou utilizar as já existentes.

Configure as credenciais das contas AWS no arquivo ~/.aws/credentials seguindo o modelo abaixo:

[vindi-dev]
aws_access_key_id =
aws_secret_access_key =
region = us-east-1

Agora, faça o build do Storybook, utilize:

docker-compose exec web npm run-script build-storybook

E por último, envie os arquivos para o s3:

npm run-script deploy-storybook

Pronto, uma nova versão do Storybook deve ter sido publicada.

Link de acesso: http://vindi-storybook-staging.s3-website-us-east-1.amazonaws.com/