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

@pismo/bolt

v3.21.0

Published

<div align='center'> <img src='https://raw.githubusercontent.com/pismo/bolt/develop/boltLogo.svg?sanitize=true' alt='Bolt' width='300' /> </div>

Downloads

16

Readme

Bolt é um conjunto de estilos e componentes para aplicações front-end que faz parte do design system da Pismo.

Instalação

npm install @pismo/bolt

Uso

import '@pismo/bolt/dist/css/bolt-css.css'
import {Sidebar} from '@pismo/bolt'

Devido ao tamanho da biblioteca css adicione o plugin postcss-purge conforme descrito abaixo:

npm i @fullhuman/postcss-purgecss -D

/* package.json */
"scripts": {
 "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
}

substitua o build/static pela pasta de build do seu projeto

Acesse a documentação para mais detalhes da utilização de cada componente

Desenvolvimento

Após clonar o projeto, crie uma branch à partir da master e faça checkout.

Após certificar que está na branch de trabalho execute o comando a seguir para baixar as dependencias do projeto:

yarn

O componentes estão separados por pastas dentro da pasta src. Cada pasta de componente deve conter: ou um arquivo .css, ou um arquivo .ts, ou ambos e um arquivo .mdx para a documentação.

O processo de desenvolvimento é feito sobre a documentação com docz. Para executar a documentação em modo de desenvolvimento rode o comando no terminal:

yarn docz:dev

Para iniciar o desenvolvimento, vamos rodar o build do css e do typescript em modo watch. Para isso execute o comando a seguir em outro terminal:

yarn dev

Documentação

Após a conclusão do desenvolvimento, o componente deve ser totalmente documentado. A documentação é feita utilizando mdx com base em React.

Testes

Os testes são no formato e2e, e é executado em cima do docz e cypress. Para rodar um teste, monte o componente no formato mdx na pasta __test__. Escreva o teste na pasta cypress/integration. Para executar em modo de desenvolvimento rode o comando em um terminal:

yarn docz:test

Em outro terminal rode o comando:

yarn cy:open

Commit

Para criar um commit execute o comando:

git commit

Esse comando vai:

  • buildar o projeto
  • formatar todos os arquivos
  • adicionar todos os arquivos adicionais ao stage
  • rodar os testes

Se os testes estiverem passando, em seguida será apresentado um menu para guiar no conventional commit.

Release

O release deve ser feito na branch master após a aprovação da PR. Para gerar o release rode o comando:

yarn release

Este comando vai mostrar um menu com opções para subir a versão do projeto, após a escolha serão executadas as tarefas a seguir de forma automatizada:

  • sobe a versão no package.json
  • cria o changelog de forma automatizada
  • cria o commit
  • cria a tag da versão

Obs.: o push deve ser feito de forma manual

Publish

Após usbir a tag, deve ser criado a release no github e a plublicação no npm.