Como criar uma packege/lib npm ?

Como criar um Packege npm ?

Hoje veremos o comando NPM na criação de pacotes npm.

Criando sua conta no npm

Primeiro precisamos ter uma conta no site npm

Adicione sua conta ao npm na sua maquina

$ npm adduser [nome do usuario]

Criando o projeto

$ npx tsdx create mylib

Criando o componente

Nesse exemplo usaremos styled-components então instale antes de continuar o tutorial

$npm install styled-componentes && npm install @types/styled-componets

Agora sim, criamos o componente

import React from "react";
import { ReactNode } from "react";
import ThemeProvider from "../../provider/theme-provider";
import styled from "styled-components";

interface ButtonStyleProps {
  variant: string
}

export const ButtonStyle = styled.button<ButtonStyleProps>`
  ${({theme, variant})=>{
    return {
      color: theme[variant].text,
      backgroundColor: theme[variant].background,
      padding: '10px 20px',
      cursor: 'pointer',
      fontWeight: '500',
      margin: '10px 0',
      width: '100%',
    }
  }}
`

export interface ButtonProps {
  children: ReactNode
  variant?: 'dark' | 'light';
  onclick: (e:  React.MouseEvent<HTMLButtonElement>) => void;
  type?: 'submit' | 'button' | 'reset';
  name?: string;
}

export function Button({
  children,
  onclick,
  name='formulario',
  type = 'submit',
  variant = 'light'
}: ButtonProps){
  return (
    <ThemeProvider>
      <ButtonStyle
        name={name}
        type={type}
        onClick={onclick}
        variant={variant}>
        {children}
      </ButtonStyle>
    </ThemeProvider>
  )
}

Versionando a lib

Existem 3 formas de versionamento, patch, minor, major, cada uma com um propósito diferente. Conforme explicado abaixo.

O comando npm version patch

O comando serve para atualizar apenas uma Correção: quando corrigir falhas mantendo compatibilidade.
EX: 0.1.0
Apos o comando 0.1.1

$ npm version patch

O comando npm version minor

O comando serve para atualizar versão Menor: quando adicionar funcionalidades mantendo compatibilidade, e
EX: 0.1.0
Apos o comando 0.2.0

$ npm version minor

O comando npm version major

O comando serve para atualizar versão Maior: quando fizer mudanças incompatíveis na API,
EX: 0.1.0
Apos o comando 2.0.0

$ npm version major

O comando npm publish

O comando serve para publicar o projeto

$ npm publish

Criando um script

Podemos criar um script para rodar na linha de comando e agilizar as coisas.
Adicione na parte de script do packege.json a linha de código "deploy" : "npm version patch && npm publish" em seguida rode o comando:

$ npm run deploy

Assim enviaremos nosso projeto para o npm

Usando nossa lib

Para usar a lib basta instalar ela via npm ou yarn

$ npm install [nome da lib]