{"id":170,"date":"2020-02-29T14:27:00","date_gmt":"2020-02-29T14:27:00","guid":{"rendered":"https:\/\/blogs.zeiss.com\/intern\/tech\/?p=170"},"modified":"2020-02-24T10:40:46","modified_gmt":"2020-02-24T10:40:46","slug":"precise-ui","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/tech\/precise-ui\/","title":{"rendered":"Precise UI"},"content":{"rendered":"\n

Introduction to Precise UI<\/h2>\n\n\n\n

Why we developed Precise UI<\/h3>\n\n\n\n

Few years ago we started working on Digital Customer Companion, which is an online portal for customers of Zeiss. It was a greenfield project, where we were laying foundation for one of the core digital products at Zeiss.<\/p>\n\n\n\n

From initial design prototypes it was clear, that existing component libraries or frameworks like Bootstrap or Material Design either were too generic or had very strong design language, that redesigning it didn\u2019t make sense. In addition, those frameworks and component libraries offered simple components, which meant they were only basic building blocks. Hence, Precise UI was created.<\/p>\n\n\n\n

What is Precise UI<\/h3>\n\n\n\n

Precise UI is an extensive React component library based on design language of Zeiss brand. It is created with styled components and Typescript. Currently, Precise UI offers more than 75 components, and more components are planned.<\/p>\n\n\n\n

How to use Precise UI<\/h2>\n\n\n\n

To start using Precise UI, you just need to install the package with npm<\/code> or yarn<\/code><\/p>\n\n\n\n

npm install precise-ui<\/code><\/pre>\n\n\n\n
or<\/p>\n\n\n\n
yarn add precise-ui<\/code><\/pre>\n\n\n\n
 As Precise UI is built with React and styled-components, they need to be installed as well <\/p>\n\n\n\n
npm i react@16 styled-components@4<\/code><\/pre>\n\n\n\n
Once project is set up and dependencies are installed, simplest app can be as below <\/p>\n\n\n\n
import * as React from 'react';\nimport { render } from 'react-dom';\nimport { Button, PageHead, Container } from 'precise-ui';\n\nimport '.\/styles.css';\n\nfunction App() {\n  return (\n    <Container>\n      <PageHead title=\"Hello, Precise\" \/>\n      <Button onClick={() => alert('hello')}>Text<\/Button>\n    <\/Container>\n  );\n}\n\nconst rootElement = document.getElementById('root');\nrender(<App \/>, rootElement);\n\n\/\/render codesandbox app\n![alt][\/img\/initial.png]<\/code><\/pre>\n\n\n\n
Styling<\/h3>\n\n\n\n
As already mentioned, Precise UI uses styled components underneath. On top of that, styled components exposes it’s own version of styled<\/code> from styled-components<\/code>, that has additional functionality to make it easier to use theme variables of Precise UI.<\/p>\n\n\n\n
Example below changes color of the link to primary and secondary colors of the theme.<\/p>\n\n\n\n
import { styled, themed, ActionLink, getFontSize } from 'precise-ui';\n\nconst StyledActionLink = styled(ActionLink)`\n  ${themed(\n    ({ theme }) => `\n    color: ${theme.primary};\n    ${getFontSize('xSmall')}\n    &:hover{\n      ${getFontSize('xLarge')}\n      color: ${theme.secondary};\n    }\n  `\n  )}\n`;\n\n\/\/render codesandbox here ()<\/code><\/pre>\n\n\n\n
Alongside styled<\/code>, Precise UI exports helper functions for styling like themed<\/code>, which allows to use default values of supplied theme, getFontSize<\/code>, which sets font size, line height and font weight, based on passed parameters <\/p>\n\n\n\n
Theme Customization<\/strong> <\/h3>\n\n\n\n
As shown above, components can be styled on individual level. However, PreciseUI can also receive a customized theme object, where global parameters for the whole component library can be updated. <\/p>\n\n\n\n
Advanced component usage<\/h2>\n\n\n\n
Form<\/strong><\/h3>\n\n\n\n
Handling forms can be cumbersome, especially in heavy form driven applications. This is where PreciseUI shines. When used with input components provided by PreciseUI, Form<\/code> component will handle change and submit events. On top of that, it accepts validation rules, to check, if values of the fields are valid.<\/p>\n\n\n\n
Simple example of the form is given below.<\/p>\n\n\n\n
import * as React from 'react';\nimport { render } from 'react-dom';\nimport { Container, Form, Button, TextField } from 'precise-ui';\n\nimport '.\/styles.css';\n\nfunction App() {\n  return (\n    <Container>\n      <h1>Form<\/h1>\n\n      <Form onSubmit={e => alert(JSON.stringify(e.data))}>\n        <div>First:<\/div>\n        <div>\n          <TextField name=\"first\" \/>\n        <\/div>\n        <div>Last:<\/div>\n        <div>\n          <TextField name=\"last\" \/>\n        <\/div>\n        <div>\n          <Button>Submit<\/Button>\n        <\/div>\n      <\/Form>\n    <\/Container>\n  );\n}<\/code><\/pre>\n\n\n\n
Here, Form<\/code> component fires onSubmit<\/code> event, with values from input components enclosed in it. For more complex cases, Form<\/code> also accepts onChange<\/code> handler, so every time any of the fields change, change event is received. <\/p>\n\n\n\n