@gazin-marketplace/marketplace-ui v2.24.2
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago