@tkapitein/eva-ui v0.20.1

Eva-UI

This package export UI components meant for EVA-Suite and should used in React (>=16.8.0). The components are built upon the Material-UI framework. The reason we built custom components out of it, is because do not use everything from Material UI. For example: A TextField component from Material-UI contains the prop variants. You can choose 3 variants in this prop. But we only use one. So one of the reasons we build our own components upon Material-UI and not use the Material-UI components self is to make sure developers are not getting a ton of options they don't need.

Furthermore there are components like Autocomplete. This is a custom component built with Downshift. It would be nice to reuse it in all of our EVA suite projects, and have one place to do changes on it. The last reason we have to build our own components is because not every UI component is a Material UI component. A component like StatusLabel or Card is done without the Material UI framework, and there will be more. But it still would be nice if developers could get their UI components from one source of thruth.

Get started

git clone git@github.com:tkapitein/eva-ui.git

cd eva-ui

npm i

This repo is divided in 4 sections:

• The export of the components (exported to /dist folder)
• A Create-React-App environment where you can render the components. This makes it easier to build them. (/view folder)
• Storybook integration. npm run storybook:start
• Playroom integration. npm run playroom:start

UI Components

The main reason this library exists is to export UI components and bundle them in a NPM package. The configuration of it is done with Rollup. The components have 3 direct dependencies:

• react-window
• downshift-js
• matchsorter

I made them dependencies because it's not likely we will use these packages in the projects. These dependencies are all used in the Autocomplete component.

Commands

• npm start => This command will build and watch the exported components from src/index.ts.
• npm run build => This command will make a build in the /dist folder.

There is no deploy script yet.

View environment

While creating new components, or making adjustments to existing components it would be nice to have an environment where you can see them. We added a Create-React-App environment in the View folder. 1. We need to link the package in to the view folder. Run npm link. 2. cd view and then you can add npm link @tkapitein/eva-ui. 3. Now you can run npm start and you will open up a window for you.

There are multiple cases where everything broke. Some things you can check for debugging purpoes:

• The Invalid Hook Call Warning is often shown when there are multiple versions of React. You can check this by using npm ls react. source
• In the most cases you can fix it by using the React version of the parent. cd ../node_modules/react. Then you can use npm link. Then go to the view folder again by cd view and npm link react.

Storybook integration

We are planning to document all our components. This is something we do with Storybook. The beauty of Storybook is that we can write our docs in MDX-format. This is a Markdown format combination with JSX.

Start storybook by npm run storybook:start. This command should open up your browser on https://localhost:9009. The stories have 2 tabs. The 'canvas' tab shows you the component without any other information. The 'Docs' tabs show you all the components, a Props table and all information that has been written in to the story.

Write a Storybook story

When adding a new component, it's important we document that. We can give background information about the component, why an when to make particular choices and what not. The input of the designers on the project would be nice as well. To add a new story, add a new file to the component folder: ComponentName.stories.mdx

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Checkbox from './Checkbox';

<Meta title="Checkbox" />

# Checkbox component
## Base
Add description...

<Preview>
  <Story name="Base">
    <div style={{display: 'flex', flexDirection: 'column'}}>
      <Checkbox>Checkbox label</Checkbox>
      <Checkbox>Checkbox label</Checkbox>
      <Checkbox>Checkbox label</Checkbox>
      <Checkbox>Checkbox label</Checkbox>
    </div>
  </Story>
</Preview>

## Prefilled checked options
Add description...

<Preview>
  <Story name="Prefilled checked options">
    <div style={{display: 'flex', flexDirection: 'column'}}>
      <Checkbox>Checkbox label</Checkbox>
      <Checkbox checked>Checkbox label</Checkbox>
      <Checkbox>Checkbox label</Checkbox>
      <Checkbox checked>Checkbox label</Checkbox>
    </div>
  </Story>
</Preview>

## Props
<Props of={Checkbox} />

The Meta component is used to add the title of the folder where the component will be stored.

The Preview and Story components are the wrappers around the component you want to add. Make sure that the name of the story is unique.

The Props component shows a list of props on the component.

You can see a live version of the storybook at Eva Atoms StoryBook.

When the master branch gets updated, Netlify triggers npm run storybook:build and deploys it.

Playroom integration

After seeing this talk by Mark Dalgleish, I got inspired and wanted to add a playground for our components. The statement of Playroom is 'Design with JSX, powered by your own component library.'. It let's you design simultaneously across a variety of screen sizes based on JSX. You can create fast mockups with it and share them via a URL. You can see a deployed version on Eva Atoms Playroom.

When the master branch gets updated, Netlify triggers npm run playroom:build and deploys it.