UI Components

This library contains Dashlane's reusable ui components built with React 🎉 https://dashlane.github.io/ui-components/

Getting Started

These instructions will get you the latest version of the ui-components lib installed in your project, so you start integrating ans using the components.

Compatibility

Your project needs to use React 16 or later.

Prerequisites

You need to install on your machine :

a recent version of Node.js
Yarn as a dependency manager

Installing

Add ui-components to your project by executing :

yarn add @dashlane/ui-components@latest

Usage

Here's an example of basic usage:

import * as React from 'react';
import { Button } from '@dashlane/ui-components';

const App: React.FC = () => {
  return (
    <div className='App'>
      <header className='App-header'>
        <img className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
      </header>
      <Button nature='danger'>Danger Button</Button>
    </div>
  );
};

export default App;

Live documentation

All the available components offered by this library are described here. Feel free to navigate through them and to live test the behaviour of each.

Testing locally with your application

When using this library in other applications, you can see and test changes made to this library locally with your application.

Since this library exports hooks, the same version of React must be used in both projects before building and linking ui-components.

For that reason, you must run the commands below if your application uses this library's hooks. (Note: don't forget to yarn unlink when you're finished testing)

# navigate to your application's react folder
$ cd {your_application_folder}/node_modules/react

# link that react version
$ yarn link

# navigate to ui-components folder
$ cd {ui_component_folder}

# use your application's react version
yarn link react

# build ui-components
yarn build

# link new build of ui-components
yarn link

# navigate to your application's folder
$ cd {other_project_folder}

# use new build of ui-components
$ yarn link @dashlane/ui-components

Built With

React - The javascript library
[OBSOLETE] Styled-Components - Used to create styled React components with an improved experience for developers
Sass - Used to add style with an improved developer experience
Yarn - Dependency Management

Contributing

Please read CONTRIBUTING.md for details on contributing on this project and the process for submitting pull requests.

Versioning

We use SemVer for versioning. To see all available versions, you can run

yarn info @dashlane/ui-components versions

mehmeteyupoglu / ui-components