ueno-ui
ATTENTION! Breaking changes
The
ueno-ui@2.x.x
use the new v2 api of react-transition-group. If your project use thereact-transition-group@1.x.x
, ueno-ui won't work, since the two API are complety different.You will have to upgrade your project with the latest version of
react-transition-group@2.x.x
, or useueno-ui@1.x.x
that still use the oldreact-transition-group@1.1.3
api.
Super simple example
;; const Example = <UenoButton to="https://ueno.co">Ueno button</UenoButton>;
How to extend css of components
Most of our components has a className
props where you can pass customs styles. For example <UenoButton />
, <Input />
or also <Field />
have a className
props.
We need to display them differently through our projects so we keep components' styles in the ui here, and we take care of the positionning on the project itself with the className
.
;; ; // ./shared/styles/overwrite-button.scss// .button {// font-size: 50px;// } const Example = <UenoButton to="https://ueno.co" className=sbutton>Ueno button with some custom styles</UenoButton>;
Development
When working on ueno-ui along side another project, it's useful to link:
> cd ueno-ui> yarn link> cd ../other-project> yarn link "ueno-ui"
then while developing in ueno-ui, storybook can be used via yarn storybook
to get changes reflected in link project, run yarn prepublish
to build.
Publish
> npm login # use ueno account > npm version minor # or patch for fixes > npm publish