# 
## Introdução
*Vetta DigitalUI* é uma a arquitetura que reune os conceitos e melhores práticas de frontend para criação de sistemas para qualquer plataforma, navegador ou dispositivo.
Fornecemos um kit de interface do usuário completo que permite criar rapidamente sites responsivos, leves, com interfaces ricas, experiência do usuário de alta qualidade.
Esta é a documentação para entedimento e utilização da arquitetura **Digital** produzida pela Vetta.
Você poderá aprender aqui sobre os componentes, como fazer novo projeto, novas telas ou até mesmo como fazer seus próprios componentes utilizando o **React** e **TypeScript**.
## Itens básicos da arquitetura
* React: (https://reactjs.org/)
* Easy peasy: State management lib under Redux implementation (https://github.com/ctrlplusb/easy-peasy)
* Apisauce: API client lib under Axios implementation (https://github.com/infinitered/apisauce)
* Typescript: Typed superset of Javascript (https://www.typescriptlang.org/)
* AntD: Basic components lib (https://ant.design/)
* Nodejs
> * O template prevê a tilização de **Nodejs** por padrão mas o sistema poderá ser acoplado a:
* .net Core
* Java
* PHP
* Entre outros
## Instalação
```
git clone https://maycon_viridis@bitbucket.org/viridis_solutions/viridis-react.git
# clone the repo
$ cd novo-projeto-digital
# go into app's directory
$ npm install
# install app's dependencies
```
## Utilização
```command
npm run serve
# reload localhost:3000.
$ npm run build
# build
```
## Configuração Inicial
Certifique-se de ter suas páginas configuradas com os mais recentes padrões de design e desenvolvimento. Isso significa usar um doctype HTML5 e incluir uma meta tag de viewport para comportamentos responsivos apropriados. Coloque tudo junto e suas páginas devem ficar assim:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Novo Projeto Digital</title>
</head>
</head>
<body>
<div id="root"></div>
<script src="../src/index.tsx"></script>
</body>
</html>
```
## Estrutura de código
O projeto será criado com estrutura organizada visando a melhor evolução e manutenção do código-fonte:
* ***api***: Contém as interfaces e fronteiras com as requisições ao backend.
* ***components***: Contém todos os componentes exclsivos do template. Os componentes básicos não estão presentes nesta pasta estão encaplsados na bliblioteca digital.
* ***fonts***: Contém arqivos de fontes do projeto. Poderão ser alterados para cada aplicação se necessário.
* ***helpers***: Contém configrações do *storage*.
* ***rotes***: Contém todas as rotas trabalhadas no projeto.
* ***store***: Contém os modelos e implementação dos itens do storage.
* ***style***: Contém a folha de estilo para o sistema.
* ***types***: Contém os tipos de itens a serem trabalhados no sistema como .png, .jpg, etc.
* ***views***: Contém todas as telas do projeto
## Layout
### Estilo
o projeto tem a estrutura acima para controle dos estilos do sistema.
Em geral apenas o arquivo ***site.css*** deverá ser alterado para substuir as cores e estilos do arquivo principal ***main.css***.
### Workspace
O workspace é m conjunto de componentes predefinidos qe fazem parte da estrutura básica de layout do sistema.
### Menu
O menu será configurado utilizando o arquivo ***menu.json*** contido no projeto.
```json=
"menu": [
{
"label": "Template Forms",
"icon": "commons-settings",
"items": [
{
"label": "Template View",
"uri": "/template"
}
]
}
```
* **Tipos**: Article ou Video
* Referência para *UserCrudView*
* URL direta para:
http://<host>:<port>/<app>/web/admin/users?p1=v1
&item=10&view=history
* APIs disponíveis em:
http:// ://<host>:<port>/<app>/api/v1/admin/users?status=active
* Security Keys (opcional)
### Views
### Componentes de Layout da View
### MasterArea
### Itens do formulário
Os itens de formlário são baseados nos componentes básicos do antd.
São exemplos:
Para conhecer todos os componentes acesse:
> AntD: Basic components lib (https://ant.design/)
## Modelos de Tela (Views)
Os componentes listados acima foram desenvolvidos visando atender a necessidades exclusivas de aplicações da corporativas.
### MasterDetailCrudView
Componentes utlizado para criação de telas contendo area de busca de itens mais dinamica e edição rápida dos itens.
**utlização do componente**
```react
export default () => {
const filterPredicate = (item: User, value: string) => {
return (
item.description.toLowerCase().includes(value.toLowerCase()) ||
item.code.toLowerCase().includes(value.toLowerCase())
);
};
return (
<MasterDetailCrudView
getAllItems={getAllUsers}
createItem={createUser}
updateItem={updateUser}
deleteItem={deleteUser}
filterPredicate={filterPredicate}
titleExtractor={item => item.code}
descriptionExtractor={item => item.description}>
<GridView
initialValues={initialValues}
validationSchema={validationSchema}
toolbar={formProps => (
<Button icon="ui-save" responsive onClick={formProps.submitForm}>
SAVE
</Button>
)}>
<Widget title="Data">
<FormUser />
</Widget>
</GridView>
</MasterDetailCrudView>
);
};
```
### TableCrudView
utilizado para criação de edição de dados no formato tradicional contendo tela de listagem e tela de edição.
```react
return (
<TableCrudView
{...restProps}
table={{ columns }}
getAllItems={(item?: any) => scvApi.post<any>(`${resourceUrl}/search`, item)}
createItem={item => scvApi.post<any>(`${resourceUrl}/save`, item)}
updateItem={item => scvApi.post<any>(`${resourceUrl}/save`, item)}
deleteItem={id => scvApi.post<any>(`${resourceUrl}/delete`, id)}>
<GridView
toolbar={formProps => (
<Button icon="commons-ok" responsive onClick={formProps.submitForm}>
Salvar
</Button>
)}>
<Widget>{createForm}</Widget>
</GridView>
</TableCrudView>
);
};
```
### RegisterView
utilizado para a constrção de telas de cadastro do sistema.
**Declaração de Colunas, Formulário de Criação e Formulário de Filtro**
```react
const columns = [{ title: 'Número', dataIndex: 'numero' }, { title: 'Descrição', dataIndex: 'descricao' }];
const CreateForm = () => (
<Row>
<Col span={6}>
<FormInput name="numero" label="Número da Locomotiva" />
</Col>
<Col span={6}>
<FormInput name="descricao" label="Descrição" />
</Col>
</Row>
);
const FilterForm = () => (
<Row>
<Col span={2}>
<FormInput name="numero" label="Número da Locomotiva" />
</Col>
</Row>
);
```
**utilização do componente**
```react
export default () => {
return (
<RegisterView
title="Cadastro de Locomotiva"
resourceUrl="cadastroLocomotiva"
columns={columns}
filterForm={<FilterForm />}
createForm={<CreateForm />}
updateForm={<CreateForm />}
/>
);
};
```
### ReportView
utilizado para a constrção de telas de relatório do sistema.
**utlização do componente**
```react
export default () => {
return (
<ReportView
reportUrl=""
title="Aderência da Programação Ferroviária"
initialValues={{
mesAno: Date.now(),
}}>
<FormDatePicker label="Mês/Ano:" name="mesAno" />
</ReportView>
);
};
```
### LegacyFrame
utilizado para fazer embeeded de telas de aplicações qe desejam tilziar apenas as telas no novo workspace sem criar novas telas (views) para a mesma.
### LegacyView
utilizado para fazer embeeded de telas de aplicações qe desejam tilziar apenas as telas no novo workspace sem criar novas telas (views) para a mesma.
Sign in with Wallet
Connect another wallet