volst / ui-components

💎 A React UI component library for Volst.

Volst UI Components

A React component library for Volst.

Demo / overview of all components

Install

yarn add @volst/ui-components
npm i @volst/ui-components --save

Usage

The components are documented in the demo, in the top-right you can press "Show Info" to see all the possible props for that component.

An example:

import React from 'react';
import ReactDOM from 'react-dom';
import { VolstTheme, Button } from '@volst/ui-components';

ReactDOM.render(
    <VolstTheme>
        <Button>Foobar</Button>
    </VolstTheme>,
    document.getElementById('root')
);

<VolstTheme /> accepts a theme prop, which can be used to change some project-wide settings. An example:

const theme = {
    primaryColor: '#006b94',
};

<VolstTheme theme={theme} />

See all settings.

Contributing

Please read the contributing guide.

Inspiration

• SEEK Style Guide
• Ant Design
• Elemental UI
• Material UI
• Semantic UI React
• Blueprint

ui-components's Issues

FancySelect: improve styling

The styling of the FancySelect component is not that great;

Automate versioning via CI

Now that we use Travis, I should find a way to automate releases. Perhaps use semantic-release to auto-generate changelog.

Refactor to use TypeScript

I wanna try how this module would work with TypeScript.

My main reason for doing this would be the better integration with IDE's, since with TypeScript they can know the exact props etc. ahead of time.

• Use special styled-components wrapper everywhere
• Fix @withTheme TS error
• Fix all TS errors
• Fix build script to compile with TS
• Inventarize use of any and make ticket to resolve later
• Compare new build size with old build size

ActionBar: don't use full width

When not using <Row> and <Col>, the ActionBar component shows two buttons like this:

I would expect them to be next to eachother. I have pushed this example to the repository.

Fix `any` typescript hacks

When converting to TypeScript I made a couple of shortcuts by typecasting to any, which resolves type issues by bypassing the types...

Look into switching to `emotion`

emotion instead of styled-components is quite interesting; to start with it is smaller, but the main advantage for me is that it supports things like this:

const active = css`background: red`;
...
<Dropzone activeClassname={active} />

I really miss this feature in styled-components. Switching would be relatively easy, since emotion's API is largely the same as styled-components.

TypeScript support also seems very good in emotion.

But it all might not be worth it...

Modal: add smooth animation

For the Modal component there should be a quick subtle animation.

Something like ant.design has would be superb, but perhaps a bit difficult to recreate: https://ant.design/components/modal/

Add correct typings for Icon components

At the moment all Icon components have this typing: let IconChat: (props: any) => JSX.Element. Since the icon is directly passed to SVG, we can use the SVG props interface.

Add TypeScript declarations to package

Now that we use TypeScript, we should include the generated declarations so autocomplete + typings work correctly in a project.

Enable TypeScript strict mode

Only when TypeScript's strict mode is enabled it fully shows its potential.

Auto-imports in vscode is broken

Need to look into why adding types to the package.json lead vscode into stopping providing auto-import. It does seem that there is something wrong with some of the exports;

• PropTypes.ts file doesn't seem to be generated
• @types packages are not provided to the user
• styled-components.d.ts is giving an error (which the original styled-components file doesn't)

Maybe fixing that will automatically fix the auto-imports. Or maybe vscode's IntelliSense just works differently when there are types, but how???

Responsiveness

Some issues regarding responsiveness:

• Layout of nav bar and toolbar stretches over the whole width, while the content is limited to a max width. I suggest to limit the width of the nav bar and tool bar content to the same content max width. Background color / container should stretch over the whole width of the view.
• The content max width is too limited for large monitors. With wide tables and a lot of data it is handy to use all space available.
• There is also content where you do not want to use the whole width (like forms, or text). Maybe we can set a flag for the type of container?
• I am thinking about mobile, since there will be instances where that is a requirement. Thoughts?

Modal: add quick alert/confirm modals

At the moment we often use the native window.confirm() popup to warn the user before deleting e.g. a user. This is really ugly.

I was inspired by the nice confirm() replacement SweetAlert.

We could just imitate ant.design here, I like their design and the API:

Modal.confirm({
    title: 'Do you want to delete these items?',
    onOk() {},
    onCancel() {},
});

#8 needs to be fixed before this.

Implement custom checkboxes

The default checkboxes are a bit out-of-style compared to the rest of the styling:

Fix Dropdown hitbox

This small gif explains the bug:

What happens is that the wrapper of the button and dropdown has the click handler, instead of it being on only the button. This can also be very annoying when you're trying to close the modal, as you have to click outside of the hitbox.

Modal: automatically append the modal to `<body>`

At the moment the <Modal /> component is simply rendered on the place where you decide to render it (which can be in a

with e.g. overflow: hidden;). Because that wouldn't work properly in many cases, our projects have some kind of viewStore.setModal() method, and in the top <App /> component the modal is rendered.

I don't like that at all, because it means more configuration in each project while we also could fix this in ui-components. We could imitate ant.design here (again haha)

Drop Moment as dependency

Moment is a pretty huge dependency and I don't even like the API. In the past few months a lot of alternatives have popped up. Needs research.

Improve build time

The build time is insanely high, because the rollup typescript plugin is doing very weird slow stuff.

Two ways to fix; first one to actually try to find the bottlenecks and see if we can improve it. Second one to just not bundle the whole ui-components to a single file. Maybe this is better anyway, but needs some research since it might increase build time for projects that use ui-components.

Demo's are down

None of the demo links in the readme are working.

Tooltip: should work in divs with `overflow: hidden`

Right now the tooltip component uses a :before and :after CSS hack to get placed directly underneath the child component it wraps. However, this doesn't work when a parent component has CSS like overflow: hidden.

This is fixable if JS is used to determine the x and y location of the child component, and then the tooltip is inserted in the <body> instead.

Fork grid package

I would like to implement the code of react-styled-flexboxgrid in this repository. It needs some changes so it works better with ui-components. Mainly:

• Add a last prop on <Col />
• Allow true on props, which would be the same as "xs". Example: <Row middle="xs"> to: <Row middle>.
• Add typescript types

Fancy volst.nl/ui-components link is down

Since the switch to Nimbly the URL is broken. Should switch to using ui-components.volst.nl or something.

Topmenu: make colors more configurable

Currently the MenuRow component of the topmenu will switch colors based on where it's used (first MenuRow will be white bg, second MenuRow will be dark bg).

This should be changed to allow for more flexibility; something like <MenuRow tone={Tone.Dark} />.

Research how to add support for Sketch

With html-sketchapp it should be possible to add support for Sketch, so you can use all the UI components in Sketch directly as symbols.

Errors in stories should fail the build

When there is a TypeScript error in a stories file, for example due to a prop no longer existing, it should fail the build completely. This would have prevented so much errors in the past...

Table: use fixed-layout

The Table component should use fixed-layout, so it is easier to force tables to have a specific width.

Heading/Subheading: Add options for no margin

Sometimes you don't want any margin at all on the <Heading /> or <Subheading /> components. Also sometimes you do not want margin-top.

Improve overall UI

The UI really needs some refinements. At the moment it is not visually pleasing. I realize this is very subjective but I'm just going to give some examples.

To start with, the usage of colors and subtle shadows could be improved for the overall layout:

For the top menu, I'm missing hover effects to make it a little less boring. Perhaps also a bit more shadows here or whatever;

Add CNAME file to gh-pages branch

With the value ui-components.volst.nl, apparently this is the only way to fix the domain.

Rogers design improvement tour

Add PaginationControls component

We need some kind of PaginationControls component.

Button: add loading state

Buttons should have a loading state with a fancy loading indicator.

Perhaps just <Button loading />. When this prop is true, the button should also have the disabled attribute.

Add groupings of items to dropdown-selects

It would be nice if dropdowns like FancySelect, MultiPick and MultiSelect would have groupings/heading.

The dropdown of a MultiSelect could look a bit like this:

Mammals

• Doggo
• Cat
• Human

Reptiles

• Snake
• Mark Zuckerberg
• Turtle
  etc.

Model: use `zIndexModal` configuration

With the latest refactoring of the Modal component, it doesn't use the zIndexModal anymore. This is important since as a result of this, the modal falls before the notification stack component thus hides notifications behind the modal.

MultiSelect: add placeholder prop

FancySelect: fix selected item display

In FancySelect, there is CSS and code that implies that the selected item should always be bold in the dropdown list.

However, it is styled normally:

Please take a look at:

selected: selectedItem === item.value,

FancySelect: disabled prop does not disable clear button

It is still possible to click on the clear button when everything else is disabled.