precise ui
2.1.17
Una biblioteca de componentes reaccionadas completas con dependencias mínimas impulsadas por Zeiss.
La biblioteca de componentes de la interfaz de usuario contiene ambos elementos de diseño de muy bajo nivel, así como elementos de diseño de alto nivel combinados. En general, la intención de la biblioteca es simplificar el desarrollo exponiendo componentes que satisfagan las especificaciones de diseño y proporcionen facilidad de programación. Por lo tanto, los diseños de interfaz de usuario repetibles solo deben tomar minutos en lugar de horas.
Consulte https://precise-ui.io para nuestro fregadero de cocina (es decir, página de demostración que ilustra todos los componentes, incluido su documentación).
Básicamente, el uso común debe estar implícito, mientras que las declaraciones explícitas proporcionan flexibilidad. Como tal, apuntamos a la simplicidad (obstinada), mientras que podemos personalizar tanto como sea posible. A pesar de que el diseño estándar está preparado para nuestro propio objetivo primario, queremos lograr plena libertad en esa área. Por esta razón, estamos mejorando constantemente cómo hacemos temas y cómo exponer componentes para habilitar cualquier tipo de personalización que pueda desearse.
La interfaz de usuario precisa se puede integrar fácilmente en su proyecto frontend mediante el uso de npm o hilo. Para comenzar a usarlo, siga las instrucciones a continuación:
npm i precise-uio alternativamente, usando hilo
yarn add precise-uinpm i react styled-componentsTodo listo, ahora puede comenzar a importar componenetas precisos-UI.
import { TextField } from 'precise-ui' ;
< TextField label = "Label" />Puede ver una lista de todos los componentes disponibles en nuestro sitio web.
Todos son bienvenidos a hacer cualquier contribución en la interfaz de usuario precisa. Sin embargo, antes de comenzar, asegúrese de leer nuestras instrucciones de contribución.
Si se siente incierto si debe contribuir o no, tal vez nuestro código de conducta pueda ayudarlo.
Si tiene algún uso y preguntas generales, puede hacer una pregunta sobre el desbordamiento de Stack usando la etiqueta precise-ui , y recibirá ayuda lo antes posible.
Además, al crear un nuevo problema aquí, use una de las plantillas proporcionadas:
Las siguientes secciones lo guían a través del proceso de desarrollo de la interfaz de usuario precisa.
Para el desarrollo necesitará NPM y Node.js 8+. Después de clonar el repositorio, instale todas las dependencias a través de
npm installAquí hay un ejemplo rápido para comenzar. Todo lo que necesitas es correr:
npm startComo resultado, esto comenzará al servidor de desarrollo que ejecuta el fregadero de la cocina (nuestra aplicación de demostración), que se ejecuta localmente y se puede llegar a través de Localhost: 6060. Nota: Este puerto se puede cambiar. La página disponible contiene todos los componentes incluidos y algunas documentación útil para estos.
El incremento de la versión también se puede realizar a través de npm .
npm versionEsto mostrará la versión actual y solicitará una nueva versión. Como resultado, se actualiza la información en el paquete.json. Además, se crea una etiqueta GIT con la información (prefijada automáticamente usando una "V"). El proceso también podría automatizarse, por ejemplo, especificando la nueva versión directamente. Entonces, por ejemplo, si nuestra nueva versión es "1.2.3", solo usamos el siguiente comando:
npm version --new-version 1.2.3No utilizamos exportaciones predeterminadas. En cambio, cada exportación debe nombrarse correctamente. Para los componentes, el nombre de la exportación es igual al nombre de su archivo o carpeta.
Carpetas
Cada componente principal expuesto debe colocarse en su propia carpeta debajo de components . Los componentes colocados en *.part.tsx Los archivos se consideran componentes internos solo creados para proporcionar alguna estructura interna (necesaria).
Cada componente de diseño de diseño expuesto debe colocarse en un archivo en la carpeta quarks . Los ayudantes de diseño comienzan con un prefijo Styled , al igual que deberían ser los componentes de estilo liso.
Cualquier componente de orden superior (HOC) debe ubicarse en la carpeta hoc . La convención de nombres es exponer el HOC con A with prefijo.
Los componentes relacionados con el contexto se encuentran en la carpeta contexts .
Las utilidades funcionales simples deben colocarse en la carpeta utils . Aunque por conveniencia se exportan todos los contenidos de UTILS, sus módulos deben referenciarse directamente desde cualquier componente. Las utilidades tienen que ser más seguidas, es decir, hacer referencia a los componentes de retroceso está prohibido.
Tallas
Si bien los componentes sin estado deben crearse como un const , los componentes estatales deben crearse como una class . En el primer caso, solo se debe crear una interfaz con el nombre del componente sufijo con Props (para declarar las tipos de accesorios). En el último caso, también se debe crear una interfaz adicional con el nombre del componente sufijo con State . Esta interfaz lleva la información de tipo para el estado interno del componente.
Los componentes del campo de entrada siempre deben sufijar con Field . Sus accesorios deben extender la interfaz InputProps .
Los accesorios de eventos deben tener el prefijo on y deben tener un solo argumento. Este argumento debe ser un objeto que siga una interfaz, que tiene un nombre adecuado para el evento, que generalmente consiste en el nombre del componente, el tipo de evento y el sufijo con Event , por ejemplo, para onChange de un TextField tenemos TextFieldChangeEvent .
Tenemos una variedad de clases de componentes diferentes. Deberíamos poder distinguir fácilmente entre las diferentes clases de componentes observando el sufijo de un componente. Tenemos:
*Control , componentes funcionales con estado*Panel , diseño a usar*Field , un campo de entradaLas excepciones a esta convención pueden ocurrir debido a varias razones (históricas, estéticas, ...), pero siempre deben razonarse y discutirse correctamente.
No hay mucho para escribir. Usamos más bonitos y nuestras verificaciones de compilación si el código se ha prettado correctamente. Solo corre
npm run prettierSi tiene dudas de que sus cambios de código se ajustan a nuestro formato deseado.
Cualquier cambio debe estar en la compañía con sus respectivas pruebas unitarias. Para ejecutar las pruebas usamos el siguiente comando:
npm run test Esto también ejecutará el enlace. Las pruebas de unidad independiente están disponibles a través de test:unit . Del mismo modo, también podemos informar fácilmente la cobertura del código:
npm run test:unit --coveragePara las pruebas unitarias usamos broma. Recomendamos usar pruebas de instantánea (que se realizan a través de la enzima y algunos serializador de instantánea JSON).
Las instantáneas visuales se encuentran en /integration/__image_snapshots__ .
Cuando la prueba se ejecuta, lo convierte en componentes de [componentName]/Example.md , hace capturas de pantalla y las compara con la versión anterior de capturas de pantalla.
Para ejecutar las pruebas localmente Docker debe instalarse.
npm run test:visualUna vez que se cambió, agregó o eliminó un componente, se deben actualizar las instantáneas. Para actualizar las instantáneas:
npm run test:visual -- -uEn algunos casos (es decir, componentes con animaciones) es necesario omitir la prueba. Se puede hacer de la siguiente manera: actualizar el ejemplo de ejemplo.md:
```js { "props": { "data-skip": true } }
<Component />
En algunos casos, es necesario decirle a Visual Test que espere antes de hacer una instantánea. Se puede hacer de la siguiente manera: actualizar el ejemplo de ejemplo.md:
```js { "props": { "data-wait": 500 } }
<Component />
La lista de todos los iconos importados es en /tools/icongen.config . Después de modificar la lista, debe ejecutar npm run icongen o se ejecutará en Prepush.
Todo el código liberable está agregado en la rama develop . Para hacer una versión, simplemente cree una versión GitHub (generalmente copia sobre las entradas actuales desde el archivo CHANGELOG.md ).
Un flujo de trabajo estándar parece:
developdevelop , haga un lanzamiento de GitHubdevelop , asegúrese de cambiar / incrementar el número de versiónPara averiguar sobre la versión lanzada actualmente, tiene dos opciones. O vas a la página NPM o usas las versiones de GitHub. Ambos también están vinculados en la parte superior del ReadMe.md .
La interfaz de usuario precisa se libera utilizando la licencia MIT. Para obtener más información, consulte el archivo de licencia.
Estamos utilizando algunos íconos de los iconos de la interfaz de usuario de material. Su código y diseño están cubiertos por la licencia respectiva de la interfaz de usuario de material (MIT).
