Introduction to Precise UI

Why we developed Precise UI

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.

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’t 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.

What is Precise UI

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.

How to use Precise UI

To start using Precise UI, you just need to install the package with npm or yarn

npm install precise-ui

or

yarn add precise-ui

As Precise UI is built with React and styled-components, they need to be installed as well

npm i react@16 styled-components@4

Once project is set up and dependencies are installed, simplest app can be as below

import * as React from 'react';
import { render } from 'react-dom';
import { Button, PageHead, Container } from 'precise-ui';

import './styles.css';

function App() {
  return (
    <Container>
      <PageHead title="Hello, Precise" />
      <Button onClick={() => alert('hello')}>Text</Button>
    </Container>
  );
}

const rootElement = document.getElementById('root');
render(<App />, rootElement);

//render codesandbox app
![alt][/img/initial.png]

Styling

As already mentioned, Precise UI uses styled components underneath. On top of that, styled components exposes it’s own version of styled from styled-components, that has additional functionality to make it easier to use theme variables of Precise UI.

Example below changes color of the link to primary and secondary colors of the theme.

import { styled, themed, ActionLink, getFontSize } from 'precise-ui';

const StyledActionLink = styled(ActionLink)`
  ${themed(
    ({ theme }) => `
    color: ${theme.primary};
    ${getFontSize('xSmall')}
    &:hover{
      ${getFontSize('xLarge')}
      color: ${theme.secondary};
    }
  `
  )}
`;

//render codesandbox here ()

Alongside styled, Precise UI exports helper functions for styling like themed, which allows to use default values of supplied theme, getFontSize, which sets font size, line height and font weight, based on passed parameters

Theme Customization

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.

Advanced component usage

Form

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 component will handle change and submit events. On top of that, it accepts validation rules, to check, if values of the fields are valid.

Simple example of the form is given below.

import * as React from 'react';
import { render } from 'react-dom';
import { Container, Form, Button, TextField } from 'precise-ui';

import './styles.css';

function App() {
  return (
    <Container>
      <h1>Form</h1>

      <Form onSubmit={e => alert(JSON.stringify(e.data))}>
        <div>First:</div>
        <div>
          <TextField name="first" />
        </div>
        <div>Last:</div>
        <div>
          <TextField name="last" />
        </div>
        <div>
          <Button>Submit</Button>
        </div>
      </Form>
    </Container>
  );
}

Here, Form component fires onSubmit event, with values from input components enclosed in it. For more complex cases, Form also accepts onChange handler, so every time any of the fields change, change event is received.

Responsive

Another useful component worth extra mentioning is Responsive. It allows to show and hide certain content based on the screen size. To use it, you just need to provide breakpoint name (small, medium, large, smallAndMedium, mediumAndLarge ), and component will handle displaying proper components. Below is a short example.

import * as React from 'react';
import { render } from 'react-dom';
import { Container, Responsive } from 'precise-ui';

import './styles.css';

function App() {
  return (
    <Container>
      <Responsive screenSize="small">
        <p>This will render on small screens.</p>
      </Responsive>
      <Responsive screenSize="smallAndMedium">
        <p>This will render on small and medium screens.</p>
      </Responsive>
      <Responsive screenSize="medium">
        <p>This will render on medium screens.</p>
      </Responsive>
      <Responsive screenSize="mediumAndLarge">
        <p>This will render on medium and large screens.</p>
      </Responsive>
      <Responsive screenSize="large">
        <p>This will render on large screens.</p>
      </Responsive>
    </Container>
  );
}

Responsive component also accepts a callback, that receives a screen size label, mentioned above, for the user to dynamically decide, how it should behave.

<Responsive
  render={screenSize => (
    <p>
      This is the screen size: <b>{screenSize}</b>
    </p>
  )}
/>

Apart from the main component, there is also utility function for styled-components that allows to apply certain styles for different screen sizes.

const StyledDiv1 = styled.div`
  ${displayTo('large')`font-weight: bold;`};
`;

const StyledDiv2 = styled.div`
  ${displayTo('mediumAndLarge')`font-weight: bold;`};
`;

const StyledDiv3 = styled.div`
  ${displayTo('medium')`font-weight: bold;`};
`;

const StyledDiv4 = styled.div`
  ${displayTo('smallAndMedium')`font-weight: bold;`};
`;

const StyledDiv5 = styled.div`
  ${displayTo('small')`font-weight: bold;`};
`;

const StyledDiv6 = styled.div`
  ${displayTo('(min-width: 200px) and (max-width: 500px)')`font-weight: bold;`};
`;

return (
  <div>
    <StyledDiv1>It's bold on large screens.</StyledDiv1>
    <StyledDiv2>It's bold on medium and large screens.</StyledDiv2>
    <StyledDiv3>It's bold on medium screens.</StyledDiv3>
    <StyledDiv4>It's bold on small and medium screens.</StyledDiv4>
    <StyledDiv5>It's bold on small screens.</StyledDiv5>
    <StyledDiv6>It's bold on screens between 200px and 500px.</StyledDiv6>
  </div>
);

This is the general overview of PreciseUI component library. There are many more interesting and complex components, documentation for which can be found at https://precise-ui.io/#/Components

Apart from the main component, there is also utility function for styled-components that allows to apply certain styles for different screen sizes.

const StyledDiv1 = styled.div`
  ${displayTo('large')`font-weight: bold;`};
`;

const StyledDiv2 = styled.div`
  ${displayTo('mediumAndLarge')`font-weight: bold;`};
`;

const StyledDiv3 = styled.div`
  ${displayTo('medium')`font-weight: bold;`};
`;

const StyledDiv4 = styled.div`
  ${displayTo('smallAndMedium')`font-weight: bold;`};
`;

const StyledDiv5 = styled.div`
  ${displayTo('small')`font-weight: bold;`};
`;

const StyledDiv6 = styled.div`
  ${displayTo('(min-width: 200px) and (max-width: 500px)')`font-weight: bold;`};
`;

return (
  <div>
    <StyledDiv1>It's bold on large screens.</StyledDiv1>
    <StyledDiv2>It's bold on medium and large screens.</StyledDiv2>
    <StyledDiv3>It's bold on medium screens.</StyledDiv3>
    <StyledDiv4>It's bold on small and medium screens.</StyledDiv4>
    <StyledDiv5>It's bold on small screens.</StyledDiv5>
    <StyledDiv6>It's bold on screens between 200px and 500px.</StyledDiv6>
  </div>
);

This is the general overview of PreciseUI component library. There are many more interesting and complex components, documentation for which can be found at https://precise-ui.io/#/Components