# Sistema de design HPE Grommet ## Prévia da interface do sistema de design HPE Grommet Ajuste uma alocação proposta e prepare um plano local validado. ## Referência de design do sistema de design HPE Grommet Tema Base do Grommet v2 gerado com baseSpacing=24 e scale=6; esses não são valores de grommet-theme-hpe. O projeto inicial nativo define explicitamente Arial e as cores de marca/foco demonstradas como escolhas de tema do aplicativo. ### Escala padrão de tamanhos de borda | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | global.edgeSize.hair | 1px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.xxsmall | 3px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.xsmall | 6px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.small | 12px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.medium | 24px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.large | 48px | Tamanho padrão fora da substituição responsiva pequena. | | global.edgeSize.xlarge | 96px | Tamanho padrão fora da substituição responsiva pequena. | ### Substituições responsivas para telas pequenas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | global.breakpoints.small.value | 768 | Limite do ponto de interrupção pequeno no tema Base. | | small.edgeSize.xxsmall | 2px | Espaçamento fino para telas pequenas. | | small.edgeSize.xsmall | 3px | Espaçamento extra pequeno para telas pequenas. | | small.edgeSize.small | 6px | Preenchimento pequeno responsivo. | | small.edgeSize.medium | 12px | Preenchimento médio responsivo. | | small.edgeSize.large | 24px | Preenchimento grande e responsivo. | | global.breakpoints.medium.value | 1536 | Próximo limite de ponto de interrupção do tema Base. | ### Cores e controles Base | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | global.colors.brand | #7D4CDB | Cor de marca padrão do Grommet, não o verde da HPE. | | global.colors.focus | #6FFFB0 | Cor de destaque padrão do foco. | | global.colors.text.light | #444444 | Texto do corpo no tema claro. | | global.colors.text.dark | #f8f8f8 | Texto do corpo no tema escuro. | | global.colors.background-front.light | #FFFFFF | Superfície frontal clara. | | global.colors.background-front.dark | #444444 | Superfície frontal escura. | | global.control.border.radius | 4px | Canto do controle básico. | | global.control.border.width | 1px | Borda do controle básico. | ### Contrato de formulários e campos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Form.value | Object keyed by field name | Use um único objeto de reserva controlado. | | Form.onChange | (value) => {} | Recebe o objeto atualizado, não um evento do DOM. | | Form.onSubmit | ({ value, touched }) => {} | Leia o valor atual aceito do formulário. | | Form.validate | blur \| submit \| change | Escolha quando a validação será executada. | | Form.errors | Object keyed like value | Associe erros remotos ou da aplicação aos campos. | ### Integração com Select e controles de intervalo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Select.options | String array or object array | O exemplo usa strings para manter o formato do valor simples. | | Select.onChange | ({ value, option }) => {} | Não leia event.target.value de Select. | | Select.valueKey | { key, reduce } for object options | reduce retorna o valor associado à chave, não o objeto completo. | | Select.labelKey | Property name or function | Rótulo visível para opções de objeto. | | Select.onSearch | Function; enables search input | Forneça a filtragem da aplicação quando necessário. | ### Anatomia do Meter | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | value | number | Quantidade representada; ignorada quando values é fornecido. | | max | number or numeric string | Capacidade total disponível; não a confunda com uma porcentagem. | | type | bar \| circle \| pie \| semicircle | Use circle para mostrar a visão geral da utilização. | | color | Color identifier | Compatível com um único valor. | | a11yTitle | string | Descreva a medida e o denominador. | | size | Named size or CSS dimension | Mantenha o anel dentro da largura disponível. | ## Sistema de design HPE Grommet: guia completo de sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design HPE Grommet: o sistema de design básico do Grommet e o tema HPE ### Não rotule o roxo como um token da HPE > O Grommet é um framework associado à HPE React, com tema básico próprio. O pacote separado grommet-theme-hpe exporta hpe para aplicações que adotam o estilo de design da HPE. Esta referência apresenta o framework básico e um exemplo com configuração explícita. O roxo da marca e a cor menta de foco vêm do tema básico; eles não são apresentados como a paleta atual da marca HPE. Consulte a especificação de apoio ### Um tema de aplicação pequeno e explícito A configuração define Arial como fonte escolhida pela aplicação e repete as cores documentadas de marca e foco do tema básico. Todas as demais regras dos componentes são herdadas do Grommet. Um produto real da HPE pode, em vez disso, passar o tema hpe aprovado e, em seguida, verificar o espaçamento e a tipografia resultantes, pois as substituições do tema podem alterar os valores básicos listados aqui. Consulte a especificação de apoio ## Sistema de design HPE Grommet: as escalas do tema podem mudar em um breakpoint ### Valores nomeados são decisões responsivas O gerador básico começa em 24 pixels. O espaçamento médio padrão das bordas é 24px, mas no breakpoint pequeno o valor médio muda para 12px. Portanto, um Box com padding responsivo pode encolher mesmo que o JSX ainda especifique medium. Consulte a escala e a substituição do breakpoint em conjunto; não garanta que medium sempre corresponda a vinte e quatro pixels. Consulte a especificação de apoio ### Use Box para o layout propriamente dito O planejador usa um Box em coluna como página e um Box responsivo em linha/coluna para o formulário e o resumo da capacidade. O formulário filho pode crescer, enquanto o resumo mantém uma largura mínima adequada. Em telas pequenas, o gráfico vem depois dos controles, de acordo com a ordem do documento. Consulte a especificação de apoio ## Sistema de design HPE Grommet: uma base legível especificada intencionalmente ### Tamanho e altura da linha são valores separados no tema O gerador básico deriva uma fonte de dezoito pixels com altura de linha de vinte e quatro pixels a partir do valor de espaçamento. O exemplo especifica esse par explicitamente com Arial para não sugerir que uma fonte de marca proprietária tenha sido baixada. Os títulos usam Heading do Grommet e o texto usa Text, permitindo que o tema determine suas funções sem reproduzir os detalhes internos dos componentes em CSS. Consulte a especificação de apoio ## Sistema de design HPE Grommet: um único objeto de reserva controlado ### Os nomes associam os campos ao formulário Form é responsável pelo contrato coordenado do formulário. No padrão controlado, value e onChange ficam a cargo do chamador. O name de cada FormField e do campo de entrada filho identifica a chave correspondente no valor. Nosso objeto de reserva contém name e pool. O controle deslizante de capacidade é mantido como um número separado, pois alimenta um diagrama atualizado em tempo real antes do envio. Consulte a especificação de apoio ### Valide o nome da reserva Um FormField obrigatório com name="name" envolve TextInput id="reservation-name". htmlFor associa o rótulo visível ao campo. O validador personalizado retorna um erro específico se o valor, depois de removidos os espaços nas extremidades, tiver menos de três caracteres. Defina a validação para ocorrer no envio, para que um formulário vazio e intocado não apresente um erro logo de início. Consulte a especificação de apoio ## Sistema de design HPE Grommet: Select tem um formato de evento próprio ### Strings tornam previsível o caso mais simples As opções de pool do exemplo são Production e Development. Portanto, o valor controlado é uma string. Se passar a usar opções de objeto, defina labelKey e, opcionalmente, valueKey com reduce, mantendo o valor armazenado coerente com essa escolha. O onChange de Select expõe um objeto value/option, ao contrário do evento do controle de intervalo nativo. Consulte a especificação de apoio ### A pesquisa e o carregamento de opções são responsabilidade da aplicação Select pode exibir um campo de pesquisa quando onSearch é fornecido. Essa prop não significa que todas as opções tenham sido filtradas automaticamente. Mantenha a coleção de origem sem filtros separada para poder restaurá-la ao fechar ou limpar a pesquisa. No caso de dois conjuntos de opções, o exemplo omite intencionalmente a pesquisa. Consulte a especificação de apoio ## Sistema de design HPE Grommet: um Meter precisa de unidades e denominador ### Represente a capacidade, não uma porcentagem sem explicação Meter recebe a quantidade projetada em uso e max=100. Neste planejador ilustrativo, o pool de exemplo já tem 35 unidades em uso, e a reserva proposta varia de 5 a 60. A porcentagem coincide com o número porque o denominador da demonstração é cem. Ainda assim, o código passa max explicitamente para que o contrato dos dados continue válido caso o total seja diferente. Consulte a especificação de apoio ### Mantenha o gráfico e o texto sincronizados O círculo, o rótulo de uso projetado e as unidades restantes são derivados do mesmo valor numérico do controle deslizante. O RangeInput nativo emite um evento do DOM; portanto, converta event.target.value em Number antes de fazer cálculos. Caso contrário, somar uma string a trinta e cinco pode produzir um total visualmente plausível, mas incorreto. Consulte a especificação de apoio ## Sistema de design HPE Grommet: rolagem do documento e composição para telas estreitas ### Escolha full="min" para esta página Grommet full=true foi pensado para uma aplicação que controla a própria área de visualização e a rolagem interna. Este planejador usa full="min" para permitir que o documento cresça. Isso evita que o formulário e sua mensagem de validação fiquem presos em um contêiner de altura fixa no celular. Consulte a especificação de apoio ### Leia ResponsiveContext dentro do Grommet Um componente filho consome o contexto atual e escolhe column em telas pequenas e row nas demais. O provedor deve envolver esse componente para que o contexto corresponda ao tema escolhido. Quando a largura disponível é estreita, o layout alternativo permanece naturalmente em coluna. - Mantenha os rótulos dos campos acima dos respectivos campos de entrada. - Coloque o resumo da capacidade depois dos controles na ordem do código-fonte. - Permita que a linha de ações quebre para a linha seguinte sem ocultar o texto de validação. Consulte a especificação de apoio ## Sistema de design HPE Grommet: associe rótulo, erro e medida ### Dê significado a cada valor numérico exibido O controle deslizante tem um rótulo persistente e uma unidade visível. O círculo recebe um a11yTitle com o uso projetado e a capacidade total. O texto próximo exibe os mesmos números, para que a informação não dependa de um arco colorido. A mensagem de erro identifica o problema com a reserva e permanece junto ao campo correspondente. Consulte a especificação de apoio ### Deixe explícito o resultado local Preparar plano armazena um instantâneo local do formulário validado e da alocação atual. Não provisiona infraestrutura. O resultado só muda após um envio válido, enquanto as alterações no controle deslizante continuam sendo uma proposta. Essa distinção é útil para comparar um plano preparado com o rascunho que está sendo editado. 1. Envie um nome vazio e confira o erro de campo obrigatório. 2. Informe um nome, escolha um pool e ajuste a alocação. 3. Prepare o plano e confira se o instantâneo local contém o pool selecionado e as unidades numéricas. Consulte a especificação de apoio ## Sistema de design HPE Grommet: monte uma composição completa do Grommet ### Instale o framework e sua dependência de estilização Instale grommet com styled-components e o ambiente de execução React em um projeto cliente. A configuração monta o Grommet e, em seguida, um componente filho que consome ResponsiveContext, um Form controlado, FormField/TextInput/Select, RangeInput e Meter. Use a propriedade label de Button em vez de children para deixar explícito o comportamento padrão de botão com estilo de rótulo. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design HPE Grommet ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS das dimensões e cores básicas do Grommet, com Arial escolhida explicitamente como fonte; não é o tema HPE separado. ``` Capacity reservation — Grommet study
Capacity planner

Plan a reservation

Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.

5 units60 units

No infrastructure will be provisioned.

``` Referência de código - Os cálculos de capacidade usam o pool de exemplo exibido. O layout independente HTML; o exemplo nativo seleciona o tema básico do Grommet, não o tema HPE separado. ### Entrada da implementação nativa completa A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned.
setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}> setPoolId(value)} /> ``` Referência de código - Declare poolId/setPoolId com useState no componente que faz a chamada. - Com reduce habilitado, o valor armazenado é o ID, não o objeto. ## Configuração do agente do sistema de design HPE Grommet ### Ponto de partida para implementação main.jsx para cliente em um projeto com um elemento raiz. Grommet básico com uma substituição de fonte/marca da aplicação declarada explicitamente. Não se pressupõe silenciosamente o tema HPE. API conferido com a documentação oficial; a compilação nativa não foi verificada aqui. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned. setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}>