precise ui

Uma biblioteca de componentes reagentes completos com dependências mínimas alimentadas pelo Zeiss.

A biblioteca de componentes da interface do usuário contém ambos, elementos de design de nível muito baixo, bem como elementos de design de alto nível combinados. Em geral, a intenção da biblioteca é simplificar o desenvolvimento, expondo componentes que satisfazem as especificações do projeto e fornecem facilidade de programação. Os projetos de interface do usuário repetíveis devem, portanto, levar apenas minutos em vez de horas.

Consulte https://precise-ui.io para a nossa pia da cozinha (ou seja, página de demonstração ilustrando todos os componentes, incluindo sua documentação).

Começando

Basicamente, o uso comum deve estar implícito enquanto a flexibilidade é fornecida por declarações explícitas. Como tal, buscamos a simplicidade (opinativa), embora possamos personalizar o máximo possível. Embora o design padrão esteja praticamente definido para nosso próprio alvo principal, queremos alcançar total liberdade nessa área. Por esse motivo, estamos constantemente melhorando como fazemos o tema e como expor componentes para permitir qualquer tipo de personalização que possa ser desejada.

A interface do usuário precisa pode ser facilmente integrada em seu projeto de front -end usando NPM ou YARN. Para começar a usá -lo, siga as instruções abaixo:

Instalação

1. Em primeiro lugar, você deve instalá -lo:

npm i precise-ui

ou alternativamente, usando fios

yarn add precise-ui

2. Em seguida, verifique se você também possui todas as dependências de colegas instaladas:

npm i react styled-components

Uso

Tudo pronto, agora você pode começar a importar comnonets precisos-ui.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

Você pode ver uma lista de todos os componentes disponíveis em nosso site.

Contribuindo

Todos são convidados a fazer qualquer contribuição na interface do usuário precisa. No entanto, antes de começar, leia nossas instruções de contribuição.

Se você se sentir incerto se deve contribuir ou não, talvez nosso código de conduta possa ajudá -lo.

Questões e suporte

Se você tiver algum uso e perguntas gerais, poderá fazer uma pergunta sobre o Stack Overflow usando a tag precise-ui e receberá ajuda o mais rápido possível.

Além disso, ao criar um novo problema aqui, use um dos modelos fornecidos:

• Relatório de bug
• Proposta de recurso

Desenvolvimento

As seções a seguir orientam você através do processo de desenvolvimento de interface do usuário precisa.

Instalação

Para o desenvolvimento, você precisará de npm e node.js 8+. Depois de clonar o repositório, instale todas as dependências via

npm install

Aqui está um exemplo rápido para você começar. Tudo que você precisa é executar:

npm start

Como resultado, isso iniciará o servidor de desenvolvimento executando a pia da cozinha (nosso aplicativo de demonstração), que roda localmente e pode ser alcançado via localhost: 6060. Nota: Esta porta pode ser alterada. A página disponível contém todos os componentes incluídos e alguns documentação esperada para eles.

Versão

Incrementar a versão também pode ser feita via npm .

npm version

Isso mostrará a versão atual e solicitará uma nova versão. Como resultado, as informações no package.json são atualizadas. Além disso, uma tag git é criada com as informações (prefixadas automaticamente usando um "V"). O processo também pode ser automatizado, por exemplo, especificando diretamente a nova versão. Assim, por exemplo, se nossa nova versão for "1.2.3", apenas usamos o seguinte comando:

npm version --new-version 1.2.3

Convenções

Não usamos exportações padrão. Em vez disso, todas as exportações devem ser nomeadas corretamente. Para componentes, o nome da exportação é igual ao nome de seu arquivo ou pasta.

Pastas

Todo componente principal exposto deve ser colocado em sua própria pasta abaixo components . Os componentes colocados em arquivos *.part.tsx são considerados componentes internos criados apenas para fornecer alguma estrutura interna (necessária).

Todo componente auxiliar de design exposto deve ser colocado em um arquivo na pasta quarks . Os ajudantes de design começam com um prefixo Styled , assim como os componentes de estilo simples deveriam ser.

Qualquer componente de ordem superior (HOC) deve estar localizado na pasta hoc . A convenção de nomenclatura é expor o hoc with um prefixo.

Os componentes relacionados ao contexto estão localizados na pasta contexts .

Os utilitários funcionais simples devem ser colocados na pasta utils . Embora, por conveniência, todos os conteúdos dos UTILs sejam exportados, seus módulos devam ser referenciados diretamente de qualquer componente. As concessionárias precisam ser praticamente auto-sustentadas, ou seja, referenciar componentes de volta é proibido.

Nomeings

Embora os componentes sem estado devam ser criados como um const , os componentes estaduais devem ser criados como uma class . No primeiro caso, apenas uma interface com o nome do componente sufixo com Props deve ser criada (para declarar as tímidas dos adereços). Neste último caso, uma interface adicional com o nome do componente também deve ser criada com State . Esta interface carrega as informações de tipo para o estado interno do componente.

Os componentes do campo de entrada devem sempre ser sufixados com Field . Seus adereços devem estender a interface InputProps .

Os adereços de eventos devem ser on e devem ter apenas um único argumento. Esse argumento deve ser um objeto que segue uma interface, que possui um nome adequado para o evento, geralmente consistindo no nome do componente, o tipo de evento e sendo sufixo com Event , por exemplo, para onChange de um TextField , temos TextFieldChangeEvent .

Temos uma variedade de classes de componentes diferentes. Deveríamos ser capazes de distinguir facilmente entre as diferentes classes de componentes olhando o sufixo de um componente. Nós temos:

• *Control , componentes funcionais com estado
• *Panel , layout a ser usado
• *Field , um campo de entrada

Exceções a esta convenção podem ocorrer devido a várias razões (históricas, estéticas, ...), mas sempre devem ser fundamentadas e discutidas adequadamente.

Formatação de código

Não há muito o que escrever. Usamos mais bonitos e nossas verificações de construção se o código foi adequadamente bonito. Apenas corra

npm run prettier

Se você estiver em dúvida, que seu código muda se encaixa na formatação desejada.

Testes de unidade

Qualquer alteração precisa estar na empresa com seus respectivos testes de unidade. Para executar os testes, usamos o seguinte comando:

npm run test

Isso também executará o linhador. Os testes de unidade independente estão disponíveis via test:unit . Da mesma forma, também podemos relatar facilmente a cobertura do código:

npm run test:unit --coverage

Para testes de unidade, usamos o JEST. Recomendamos o uso de testes de instantâneo (que são feitos via enzima e algum serializador de instantâneos JSON).

Teste visual

Os instantâneos visuais estão localizados em /integration/__image_snapshots__ .

Quando o teste é executado, ele renderiza componentes do [componentName]/Example.md , faz capturas de tela e os compara com as capturas de tela da versão anterior.

Para executar os testes localmente, o Docker deve ser instalado.

npm run test:visual

Depois que um componente foi alterado, adicionado ou removido, os instantâneos devem ser atualizados. Para atualizar instantâneos:

npm run test:visual -- -u

Em alguns casos (ou seja, componentes com animações), é necessário pular o teste. Isso pode ser feito na próxima maneira: atualizar exemplo.md arquivo:

 ```js { "props": { "data-skip": true } }

<Component />

Em alguns casos, é necessário dizer ao teste visual para esperar antes de fazer um instantâneo. Isso pode ser feito na próxima maneira: atualizar exemplo.md arquivo:

 ```js { "props": { "data-wait": 500 } }

<Component />

Adicionando novos ícones

A lista de todos os ícones importados está em /tools/icongen.config . Depois de modificar a lista, você deve executar npm run icongen ou ela será executada no Prepush.

Fazendo um lançamento

Todo o código liberável é agregado na filial develop . Para fazer uma versão, basta criar uma versão do GitHub (geralmente copiando as entradas atuais do arquivo CHANGELOG.md ).

Um fluxo de trabalho padrão se parece assim:

1. Clone o repositório
2. Faça um ramo
3. Faça o trabalho
4. Empurre suas mudanças
5. Faça um PR do seu garfo / ramo para develop
6. Uma vez que os recursos "suficientes" agregados no develop fazem uma liberação do GitHub
7. Para as próximas alterações para develop , altere / incremento o número da versão

Para descobrir a versão atualmente lançada, você tem duas opções. Ou você vai para a página NPM ou usa os lançamentos do GitHub. Ambos estão vinculados no topo do readme.md também.

Licença

A interface do usuário precisa é liberada usando a licença do MIT. Para mais informações, consulte o arquivo de licença.

Estamos usando alguns ícones dos ícones da interface do usuário do material. Seu código e design são cobertos pela respectiva licença da interface do usuário do material (MIT).