volst / ui-components Goto Github PK

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.

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

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

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

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

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.

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.

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

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

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???

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

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.

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

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,

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;

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

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.

We need some kind of PaginationControls component.

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

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.

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/

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

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

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.

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.

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

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

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?

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

The styling of the FancySelect component is not that great;

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} />.

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.

None of the demo links in the readme are working.

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.

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.