volst / ui-components Goto Github PK
View Code? Open in Web Editor NEW๐ A React UI component library for Volst.
Home Page: https://ui-components.volst.nl
๐ A React UI component library for Volst.
Home Page: https://ui-components.volst.nl
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.
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;
Since the switch to Nimbly the URL is broken. Should switch to using ui-components.volst.nl or something.
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:
last
prop on <Col />
true
on props, which would be the same as "xs"
. Example: <Row middle="xs">
to: <Row middle>
.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/
When converting to TypeScript I made a couple of shortcuts by typecasting to any
, which resolves type issues by bypassing the types...
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.
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} />
.
We need some kind of PaginationControls component.
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.
Sometimes you don't want any margin at all on the <Heading />
or <Subheading />
components. Also sometimes you do not want margin-top.
Some issues regarding responsiveness:
With the value ui-components.volst.nl
, apparently this is the only way to fix the domain.
Now that we use TypeScript, we should include the generated declarations so autocomplete + typings work correctly in a project.
At the moment the <Modal />
component is simply rendered on the place where you decide to render it (which can be in a
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)
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.
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.
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 userstyled-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???
Only when TypeScript's strict mode is enabled it fully shows its potential.
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.
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
Reptiles
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.
@withTheme
TS errorany
and make ticket to resolve laterIt is still possible to click on the clear button when everything else is disabled.
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.
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...
The Table component should use fixed-layout, so it is easier to force tables to have a specific width.
None of the demo links in the readme are working.
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.