Documentação `msbn-assets`

Visão Geral

msbn-assets é uma biblioteca TypeScript que fornece uma maneira fácil e tipada de acessar os ativos da marca MSBN. Ela possui suporte nativo para React.js/Next.js, facilitando a integração dos ativos em seus projetos.

Instalação

Para instalar a biblioteca, utilize o seguinte comando:

npm install msbn-assets

Uso Básico

Exemplo para obter um ícone da Assembleia de Deus MSBN para fundo escuro em PNG

import { getAsset } from 'msbn-assets'
 
const icon = getAsset({
  asset: {
    brand: 'MSBN',
    group: 'AD',
    variant: 'Icon',
    color: 'Dark',
    use: 'RGB',
    type: 'png',
  },
})
 
console.log(icon)

Uso com React.js/Next.js

Utilizando o componente `img` do HTML

import { Asset } from 'msbn-assets/react'
 
function MyComponent() {
  return <Asset brand='MSBN' group='AD' variant='Icon' color='Dark' use='RGB' type='png' />
}

Configurando com um componente customizado

import { setOptions } from 'msbn-assets'
import { Asset } from 'msbn-assets/react'
import { Image } from 'next/image'
 
setOptions({
  imageComponent: Image,
})
 
function MyComponent() {
  return <Asset brand='MSBN' group='AD' variant='Icon' color='Dark' use='RGB' type='png' />
}

Implementação personalizada

import { getAsset } from 'msbn-assets'
import { Image } from 'next/image'
 
function MyComponent() {
  const asset = getAsset({
    asset: {
      brand: 'MSBN',
      group: 'AD',
      variant: 'Icon',
      color: 'Dark',
      use: 'RGB',
      type: 'png',
    },
  })
 
  return <Image src={asset.src} alt={asset.alt} height={asset.height} width={asset.width} />
}

Tipagem

Os tipos de ativos estão exportados no caminho msbn-assets/types. Isso fornece uma experiência de desenvolvimento mais segura e evita erros de digitação.

Exemplo de Tipagem

import { Asset } from 'msbn-assets/types'
 
const myLogo: Asset = {
  brand: 'AWKN',
  group: 'PT',
  variant: 'Default',
  color: 'Gray', // Erro: Gray não existe na variante Default, apenas Dark e Light
  use: 'RGB',
  type: 'png',
}
 
const myBackground: Asset = {
  brand: 'MSBN',
  group: 'AD',
  variant: 'Background',
  color: 'White',
  use: 'CMYK', // Erro: CMYK não existe na variante Background, apenas RGB
  type: 'png',
}
 
const myIllustrator: Asset = {
  brand: 'MSBN',
  group: 'AD',
  variant: 'Illustrator',
  use: 'CMYK',
  type: 'png', // Erro: png não existe na variante Illustrator, apenas ai
}
 
const myBackgroundWebp: Asset = {
  brand: 'MSBN',
  group: 'AD',
  variant: 'Background',
  color: 'White',
  use: 'RGB',
  type: 'webp', // Erro: webp não existe na variante Background, apenas png, svg, jpg, pdf
}

Tipagem Específica

Para um controle mais específico, tipos individuais também estão disponíveis:

import { Asset_CMYK, Asset_RGB } from 'msbn-assets/types'
 
const myBackground_CMYK: Asset_CMYK = {
  // Erro: esse asset não existe em CMYK
  brand: 'MSBN',
  group: 'AD',
  variant: 'Background',
  color: 'White',
  use: 'RGB',
  type: 'webp',
}
 
const myIllustrator_RGB: Asset_RGB = {
  // Erro: esse asset não é em RGB
  brand: 'MSBN',
  group: 'AD',
  variant: 'Illustrator',
  use: 'CMYK',
  type: 'ai',
}

Dev Mode

Agora você está pronto para incorporar os ativos da marca MSBN em seus projetos de forma fácil e segura usando a biblioteca msbn-assets. Ative o modo de desenvolvedor para copiar o JSON reference a cada asset:

Documentação msbn-assets