@lidofinance/lido-ui
v3.26.1
Published
> React components for Lido Finance projects.
Downloads
7,004
Readme
Lido UI Components
React components for Lido Finance projects.
Check out our Storybook at https://ui.lido.fi
Breaking Changes
useSystemTheme
hook will no longer return light theme as a fallback when system theme was not identified. A check needs to be added after upgrading.
Getting Started
Simply add lido-ui
to your dependencies:
yarn add @lidofinance/lido-ui
Then, import Lido theme provider and wrap your components in _app.js
:
import { ThemeProvider } from '../lido-ui'
function App({ Component }) {
return (
<ThemeProvider>
<Component />
</ThemeProvider>
)
}
Usage
Simply import any components and use in your project:
import { Button } from '../lido-ui'
Developing
yarn dev
- Start Storybook locally to start developing components.yarn build
- Build all components.yarn test
- Run tests across components.yarn lint
- Run eslint across components.
Initial setup
- To get started, install the dependencies:
yarn install
- Build the packages:
yarn build
- Run the storybook:
yarn dev
Adding a new package
Add files
- Add a new package directory into the
packages
dir. - Add
package.json
, check other packages to find out what you can copy from theirpackage.json
files. - Fill in correctly the
name
field in thepackage.json
. - Add
README.md
andLICENSE.txt
. You can copytsconfig.json
and.npmignore
from other packages. - Add the
src
directory, where the package's code will be placed.
Run commands in the following order
yarn combine
It triggers a script, which updates the main lido-ui
package. The script finds all packages, including the new one,
and adds them to dependencies of lido-ui
and to exports in its index file.
yarn install && yarn build
Publishing
Packages are automatically published to npm when you push to master. The publication is based on semantic-release and @qiwi/multi-semantic-release.
For correct version detection, please follow the conventional commit format.
Linking
To include a local version of modified lido in your project, run yarn link
in packages/lido
and run yarn link lido
in project you want to use it in. Make sure to run yarn unlink lido
after it's no longer needed.