# Sistema de diseño HPE Grommet ## Vista previa de la interfaz del sistema de diseño HPE Grommet Ajusta una asignación propuesta y prepara un plan local validado. ## Referencia de diseño del sistema de diseño HPE Grommet Tema base de Grommet v2 generado con baseSpacing=24 y scale=6; estos no son valores de grommet-theme-hpe. El proyecto inicial nativo establece explícitamente Arial y los colores de marca y de foco mostrados como opciones del tema de la aplicación. ### Escala predeterminada de tamaños de borde | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | global.edgeSize.hair | 1px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.xxsmall | 3px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.xsmall | 6px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.small | 12px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.medium | 24px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.large | 48px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | | global.edgeSize.xlarge | 96px | Tamaño predeterminado fuera del ajuste adaptable para tamaños pequeños. | ### Ajustes adaptables para tamaños pequeños | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | global.breakpoints.small.value | 768 | Límite del punto de ruptura small en el tema base. | | small.edgeSize.xxsmall | 2px | Espaciado fino para pantallas pequeñas. | | small.edgeSize.xsmall | 3px | Espaciado xsmall para pantallas pequeñas. | | small.edgeSize.small | 6px | Relleno adaptable pequeño. | | small.edgeSize.medium | 12px | Relleno adaptable mediano. | | small.edgeSize.large | 24px | Relleno grande adaptable. | | global.breakpoints.medium.value | 1536 | Siguiente límite del punto de ruptura base. | ### Colores y controles base | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | global.colors.brand | #7D4CDB | Color de marca predeterminado de Grommet, no el verde de HPE. | | global.colors.focus | #6FFFB0 | Color de acento predeterminado para el foco. | | global.colors.text.light | #444444 | Texto del cuerpo para el tema claro. | | global.colors.text.dark | #f8f8f8 | Texto del cuerpo para el tema oscuro. | | global.colors.background-front.light | #FFFFFF | Superficie frontal clara. | | global.colors.background-front.dark | #444444 | Superficie frontal oscura. | | global.control.border.radius | 4px | Radio de esquina del control base. | | global.control.border.width | 1px | Borde del control base. | ### Contrato de formulario y campos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Form.value | Object keyed by field name | Usa un único objeto de reserva controlado. | | Form.onChange | (value) => {} | Recibe el objeto actualizado, no un evento del DOM. | | Form.onSubmit | ({ value, touched }) => {} | Lee el valor actual aceptado del formulario. | | Form.validate | blur \| submit \| change | Elige cuándo se ejecuta la validación. | | Form.errors | Object keyed like value | Asocia los errores remotos o de la aplicación a los campos. | ### Integración con Select y el rango | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Select.options | String array or object array | El ejemplo usa cadenas para mantener sencilla la estructura del valor. | | Select.onChange | ({ value, option }) => {} | No leas event.target.value para Select. | | Select.valueKey | { key, reduce } for object options | reduce devuelve el valor asociado a la clave en lugar del objeto completo. | | Select.labelKey | Property name or function | Etiqueta visible para las opciones de objeto. | | Select.onSearch | Function; enables search input | Proporciona el filtrado de la aplicación cuando sea necesario. | ### Anatomía del medidor | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | value | number | Cantidad representada; se ignora si se proporciona values. | | max | number or numeric string | Capacidad total disponible; no la confundas con un porcentaje. | | type | bar \| circle \| pie \| semicircle | Usa circle para la vista general de utilización. | | color | Color identifier | Válido con un único valor. | | a11yTitle | string | Describe la medida y el denominador. | | size | Named size or CSS dimension | Mantén el anillo dentro del ancho disponible. | ## HPE Grommet Guía completa del sistema de diseño Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño HPE Grommet: Grommet base y el tema HPE ### No etiquetes el morado como un token de HPE > Grommet es un framework React asociado a HPE que tiene su propio tema base. El paquete independiente grommet-theme-hpe exporta hpe para las aplicaciones que adoptan el estilo de diseño de HPE. Esta referencia explica el framework base y un ejemplo configurado explícitamente. El morado de marca y el color menta de foco proceden del tema base; no se presentan como la paleta actual de marca de HPE. Consulta la especificación complementaria ### Un tema de aplicación pequeño y explícito La configuración establece Arial como fuente elegida para la aplicación y reitera los colores de marca y de foco documentados para el tema base. Todas las demás reglas de los componentes heredan de Grommet. En su lugar, un producto real de HPE puede pasar el tema aprobado hpe; después, debe comprobar el espaciado y la tipografía resultantes, ya que las sobrescrituras del tema pueden modificar los valores base que se indican aquí. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: las escalas del tema pueden cambiar en un punto de ruptura ### Los valores con nombre son decisiones adaptables El generador base comienza en 24 píxeles. El espaciado medio predeterminado de los bordes es 24px, pero el punto de ruptura pequeño cambia el valor medio a 12px. Por lo tanto, un Box que use relleno adaptable puede reducirse aunque el JSX siga indicando medium. Consulta la escala junto con la sobrescritura del punto de ruptura; no des por sentado que medium siempre equivale a veinticuatro píxeles. Consulta la especificación complementaria ### Usa Box para la distribución real El planificador usa un Box en columna como página y un Box adaptable en fila o columna para el formulario y el resumen de capacidad. El formulario hijo puede expandirse mientras el resumen mantiene un ancho mínimo útil. En pantallas pequeñas, el gráfico aparece después de los controles, de acuerdo con el orden del documento. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: una base legible definida deliberadamente ### El tamaño de fuente y la altura de línea son valores independientes del tema El generador base deriva una fuente de dieciocho píxeles y una altura de línea de veinticuatro píxeles a partir de su valor de espaciado. El ejemplo usa explícitamente esa combinación con Arial para no dar a entender que se ha descargado una fuente de marca propietaria. Los encabezados usan Grommet Heading y el texto usa Text, lo que permite que el tema determine sus funciones en lugar de reproducir los detalles internos de los componentes en CSS. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: un único objeto de reserva controlado ### Los nombres vinculan los campos con el formulario Form se encarga del contrato coordinado del formulario. En el patrón controlado, value y onChange corresponden a quien llama al componente. El name de cada FormField y del elemento de entrada hijo identifica la clave de valor correspondiente. Nuestro objeto de reserva contiene name y pool. El control deslizante de capacidad se mantiene como un número independiente porque actualiza un diagrama en directo antes del envío. Consulta la especificación complementaria ### Validar el nombre de la reserva Un FormField obligatorio con name="name" contiene TextInput id="reservation-name". htmlFor vincula la etiqueta visible. El validador personalizado devuelve un error concreto si el valor, una vez eliminados los espacios iniciales y finales, tiene menos de tres caracteres. Configura la validación para que se ejecute al enviar; así, un formulario vacío que aún no se ha tocado no mostrará un error de inmediato. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: Select tiene su propio formato de evento ### Las cadenas mantienen predecible el caso sencillo Las opciones de grupo de ejemplo son Production y Development. Por tanto, el valor controlado es una cadena. Si pasas a usar opciones de objeto, configura labelKey y, si quieres, valueKey con reduce; después, mantén el valor almacenado coherente con esa elección. onChange de Select expone un objeto value/option, a diferencia del evento del control de rango nativo. Consulta la especificación complementaria ### La búsqueda y la carga de opciones son tareas de la aplicación Select puede mostrar un campo de búsqueda cuando se proporciona onSearch. Esa propiedad no significa que todas las opciones se hayan filtrado automáticamente. Mantén por separado la colección de origen sin filtrar para poder restaurarla al cerrar o borrar la búsqueda. En el ejemplo se omite intencionadamente la búsqueda para los dos grupos. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: un medidor necesita unidades y un denominador ### Representa la capacidad, no un porcentaje sin contexto Meter recibe la cantidad usada proyectada y max=100. En este planificador ilustrativo, el grupo de ejemplo ya tiene 35 unidades en uso y la reserva propuesta oscila entre 5 y 60. El porcentaje coincide por casualidad con la cantidad porque el denominador de la demostración es cien. Aun así, el código pasa max explícitamente para que el contrato de datos siga siendo válido si cambia el total. Consulta la especificación complementaria ### Mantén sincronizados el gráfico y el texto El círculo, la etiqueta de uso proyectado y las unidades restantes se derivan del mismo valor numérico del control deslizante. RangeInput nativo emite un evento del DOM, así que convierte event.target.value a Number antes de hacer operaciones aritméticas. De lo contrario, al sumar una cadena a treinta y cinco, el total puede parecer correcto, aunque sea incorrecto. Consulta la especificación complementaria ## Sistema de diseño HPE Grommet: desplazamiento del documento y composición para pantallas estrechas ### Elige full="min" para esta página Grommet full=true está pensado para una aplicación que controla su propia ventana gráfica y el desplazamiento interno. Este planificador usa full="min" para que el documento pueda crecer. Así se evita que el formulario y su mensaje de validación queden atrapados en un contenedor de altura fija en un teléfono. Consulta la especificación complementaria ### Lee ResponsiveContext dentro de Grommet Un componente hijo consume el contexto actual y elige columna para pantallas pequeñas y fila para las demás. El proveedor debe envolver ese componente para que el contexto refleje el tema elegido. Cuando el ancho disponible es reducido, la distribución alternativa sigue siendo una columna natural. - Coloca las etiquetas de los campos encima de sus controles. - Coloca el resumen de capacidad después de los controles en el orden del código fuente. - Permite que la fila de acciones se ajuste a varias líneas sin ocultar el texto de validación. Consulta la especificación complementaria ## Conecta la etiqueta, el error y la medición en el sistema de diseño de HPE Grommet ### Indica el significado de cada valor numérico El control de rango tiene una etiqueta persistente y una unidad visible. El círculo recibe un a11yTitle que incluye el uso previsto y la capacidad total. El texto cercano muestra los mismos números para que la información no dependa de un arco de color. El mensaje de error describe el problema con la reserva y permanece junto a su campo. Consulta la especificación complementaria ### Explicita el resultado local Preparar plan guarda una instantánea local del formulario validado y de la asignación actual. No aprovisiona infraestructura. El resultado solo cambia tras un envío válido, mientras que los cambios en el control deslizante siguen siendo una propuesta. Esta distinción resulta útil para comparar un plan preparado con el borrador que se está editando. 1. Envía el formulario con el nombre vacío y comprueba el error del campo obligatorio. 2. Escribe un nombre, elige un grupo y ajusta la asignación. 3. Prepara el plan y comprueba que la instantánea local incluya el grupo elegido y las unidades numéricas. Consulta la especificación complementaria ## Monta una composición completa de Grommet en el sistema de diseño de HPE Grommet ### Instala el framework y su dependencia de estilos Instala grommet con styled-components y el entorno de ejecución React en un proyecto de cliente. La configuración monta Grommet y, después, un componente secundario que consume ResponsiveContext, un Form controlado, FormField/TextInput/Select, RangeInput y Meter. Usa la propiedad label de Button en lugar de children para dejar explícito el comportamiento predeterminado del botón con estilo de etiqueta. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño de HPE Grommet ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS de las dimensiones y los colores base de Grommet, con Arial como fuente elegida explícitamente; no es el tema HPE independiente. ``` 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.

``` Referencia de código - Los cálculos de capacidad usan el grupo de muestra que se muestra. La composición independiente es una interpretación de HTML; el ejemplo nativo selecciona el tema base de Grommet, no el tema HPE independiente. ### Entrada de implementación nativa completa La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración. ``` // 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)} /> ``` Referencia de código - Declara poolId/setPoolId con useState en el componente que realiza la llamada. - Con reduce activado, el valor guardado es el id, no el objeto. ## Configuración del agente del sistema de diseño de HPE Grommet ### Punto de partida para la implementación Archivo main.jsx de cliente para un proyecto con un elemento raíz. Grommet con el tema base y una fuente de aplicación/anulación de marca declarada explícitamente. No se presupone silenciosamente ningún tema HPE. API contrastado con la documentación oficial; aquí no se ha verificado la compilación nativa. ``` // 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}>