O Archbase React é uma biblioteca de componentes para React com TypeScript projetada para aumentar a produtividade dos desenvolvedores FrontEnd na criação de aplicações comerciais e industriais. Esta biblioteca oferece uma ampla gama de recursos e funcionalidades para acelerar o desenvolvimento de interfaces web, manter a padronização e fornecer uma experiência consistente para os usuários.
O Archbase React foi concebido com a ideia de fornecer aos desenvolvedores de FrontEnd a mesma produtividade e padronização que os desenvolvedores de aplicações desktop têm desfrutado por anos. Sua principal missão é simplificar e acelerar o processo de criação de interfaces web para aplicações comerciais e industriais (SAAS em geral). A biblioteca começou como um projeto privado, mas agora é open source, permitindo compartilhar esses benefícios com a comunidade.
O Archbase React oferece uma série de recursos essenciais, incluindo:
- Templates Prontos: Componentes pré-construídos que aceleram a criação de interfaces web.
- Fonte de Dados: Gerenciamento centralizado de dados e vinculação bidirecional para componentes visuais.
- Componentes Especializados: Criação rápida de interfaces de administrador com poucas linhas de código.
- Controle de Ações: Rastreamento e controle de ações do usuário com integração de segurança.
Esses recursos beneficiam os desenvolvedores FrontEnd, permitindo:
- Iniciar rapidamente novos projetos com uma ampla variedade de componentes e modelos.
- Aumentar a produtividade na construção de interfaces web, desde CRUDs simples até telas complexas.
- Padronizar interfaces, incluindo temas e cores, economizando tempo em adaptações.
- Utilizar uma variedade de componentes especializados para aplicações comerciais ou industriais (SASS).
O Archbase React é voltado para desenvolvedores FrontEnd que trabalham com React e TypeScript, independentemente do nível de experiência. Pode ser aplicado em uma ampla gama de aplicações comerciais e industriais.
A biblioteca é baseada no Mantine.dev e utiliza as seguintes tecnologias:
- React com TypeScript usando hooks.
- Documentação em StoryBook.
Para começar a usar o Archbase React em um projeto React, siga os passos abaixo:
- Crie um novo aplicativo React TypeScript (usando Vite como exemplo):
npm init vite@latest minhaAplicacao -- --template react-ts
cd minhaAplicacao
yarn install- Instale o Archbase React:
yarn add archbase-react- Execute o aplicativo:
yarn run devAgora você pode começar a integrar os componentes do Archbase React em seu projeto.
Aqui está um exemplo simples de código que demonstra como criar uma interface de administrador com menu e abas:
// Este é parte de um código mais amplo para criação de um admin inicial para
// uma aplicação, mais detalhes e código estão na documentação do produto:
// Importe os componentes necessários e configure-os conforme necessário
const ArchbaseAdminMainLayoutExample = () => {
const adminStore = useArchbaseAdminStore()
const headerActions = useMemo((): ReactNode => {
return [
<Tooltip withinPortal withArrow label="Trocar empresa">
<ActionIcon variant="transparent">
<IconSwitchHorizontal size="2rem" />
</ActionIcon>
</Tooltip>,
<Tooltip withinPortal withArrow label="Tela cheia">
<ActionIcon variant="transparent">
<IconArrowsMaximize size="2rem" />
</ActionIcon>
</Tooltip>,
<Tooltip withinPortal withArrow label="Notificações">
<ActionIcon variant="transparent">
<IconBell size="2rem" />
</ActionIcon>
</Tooltip>,
<Tooltip withinPortal withArrow label="Chat">
<ActionIcon variant="transparent">
<IconMessageChatbot size="2rem" />
</ActionIcon>
</Tooltip>,
]
}, [])
return (
<div style={{ width: '100%', height: 'calc(100vh - 50px)' }}>
<ArchbaseAdminMainLayout
navigationData={navigationDataSample}
navigationRootLink="/"
footer={<ArchbaseAdminLayoutFooter />}
header={
<ArchbaseAdminLayoutHeader
user={fakeUser}
headerActions={headerActions}
navigationData={navigationDataSample}
userMenuItems={
<Fragment>
<Menu.Label>Usuário</Menu.Label>
<Menu.Item icon={<IconUserCircle size={14} />}>Meu perfil</Menu.Item>
<Menu.Item icon={<IconSettings size={14} />}>Configurações</Menu.Item>
<Menu.Divider />
<Menu.Label>Conta</Menu.Label>
<Menu.Item icon={<IconBrandMessenger size={14} />}>Suporte</Menu.Item>
<Menu.Item
color="red"
icon={<IconLogout size={14} />}
onClick={() => {
//
}}
>
Sair
</Menu.Item>
</Fragment>
}
logo={archbaseLogo3}
/>
}
>
<ArchbaseAdminTabContainer
onChangeActiveTabId={(activeTabId: any) => adminStore.setActiveTabId(activeTabId)}
onChangeOpenedTabs={(openedTabs: ArchbaseTabItem[]) => {
adminStore.setOpenedTabs(openedTabs)
}}
openedTabs={adminStore.openedTabs}
activeTabId={adminStore.activeTabId}
navigationData={navigationDataSample}
/>
</ArchbaseAdminMainLayout>
</div>
)
}
export default ArchbaseAdminMainLayoutExample;A documentação completa do Archbase React está disponível no formato Storybook no seguinte endereço: https://react.archbase.com.br.
Para obter suporte, participar da comunidade de desenvolvedores e relatar problemas ou sugestões, visite a página do GitHub do projeto: https://github.com/edsonmartins/archbase-react.
O projeto está em constante evolução, e você pode encontrar informações sobre releases, correções e o roadmap no GitHub.
O Archbase React é uma biblioteca open source e é distribuído sob a licença Apache License 2.0.
Exemplos de uso detalhados podem ser encontrados na documentação do produto, que está disponível no formato stories do Storybook, acessível em https://react.archbase.com.br.