Marketplace UI

Esse é o projeto de componentes para os painéis do Gazin Marketplace, baseado no ChakraUI

Instalação

O projeto de produção pode ser usado adicionando a dependência com:

yarn add @gazin-marketplace/marketplace-ui

Configure o Provider

Na raiz do seu projeto configure o provider, também é necessário utilizar o react-router-dom

import * as React from 'react'
import ReactDOM from 'react-dom'
// 1. importe o `MarketplaceProvider` e o BrowserRouter
import {
  MarketplaceProvider,
  extendTheme,
  ExampleTheme
} from '@gazin-marketplace/marketplace-ui'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    // 2. Envolva seu código no provider e no BrowserRouter
    <BrowserRouter>
      <MarketplaceProvider theme={extendTheme(ExampleTheme)}>
        <p>Seu código vai aqui</p>
      </MarketplaceProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

Ou, em um projeto com Next.js use como

import type { AppProps } from 'next/app'
// 1. importe o `MarketplaceProvider` e o BrowserRouter
import {
  MarketplaceProvider,
  extendTheme,
  ExampleTheme
} from '@gazin-marketplace/marketplace-ui'
import { BrowserRouter } from 'react-router-dom'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    // 2. Envolva seu código no provider e no BrowserRouter
    <BrowserRouter>
      <MarketplaceProvider theme={extendTheme(ExampleTheme)}>
        <Component {...pageProps} />
      </MarketplaceProvider>
    <BrowserRouter/>
  )
}

Pronto! Agora é só usar os componentes disponíveis no marketplace-ui

Desenvolvimento

Primeiro instale as dependências do projeto.

yarn

Para usar essa lib no desenvolvimento vamos usar um pacote global, o yalc.

yarn global add yalc

Agora 'publique' o pacote localmente

yalc publish

Pronto, agora você pode adicionar a lib a outros pacotes usando

yalc link @gazin-marketplace/marketplace-ui

Hot-reload

Para que suas mudanças sejam propagas ao projetos dependentes usaremos dois comandos, em dois terminais diferentes.

# Automaticamente rebuilda o projeto quando houver mudanças
yarn build:dev

# Automaticamente propaga as mudanças caso uma build esteja disponível
yarn watch

Criando componentes

Para criar componentes usamos o Plop.js, acesse-o usando

yarn generate

Storybook

Para executar o storybook basta executar

yarn storybook

Publishing

Todo a parte de publish do pacote é gerenciada pela pipeline, não realizar publish manual