Kedro UI

This repo represents a set of UI components that we use in our internal products and applications. It allows us to move at speed i.e. not rewrite the wheel on every new endeavour.

👀 Getting Started

Installation

To install Kedro UI into your project, run the following in your project directory:

npm install @quantumblack/kedro-ui

Usage

The recommended way to import Kedro UI components is to import each component and the core CSS separately:

// Core CSS (import once)
import '@quantumblack/kedro-ui/lib/styles/app.css';
// Single component (import in each file you use it)
import Button from '@quantumblack/kedro-ui/lib/components/button';

However the quickest way to import Kedro UI components is with a destructured import:

import { Button } from '@quantumblack/kedro-ui';

Doing this will import the entire library, which will increase your bundle size and affect your page load time, so we don't recommend using this method unless you are using babel-plugin-transform-imports or you don't care about bundle size.

Once you have installed the library and imported a component, you can use it in your project:

import React from 'react';
import ReactDOM from 'react-dom';
import '@quantumblack/kedro-ui/lib/styles/app.css';
import Button from '@quantumblack/kedro-ui/lib/components/button';

const MyComponent = () => (
  <Button theme='light' size='small' mode='secondary'>Hello world!</Button>
);

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Loading Webfonts

By default, the 'Titillium Web' font is imported from Google Fonts via styles/app.css. If you would prefer not to include this webfont, you can instead use styles/app-no-webfont.css, which does not include this font import. If you need more control over font loading (for instance, you might want to add a callback for once the font has loaded), you can import LoadWebFont from utils/webfont.js, which provides a configurable JS wrapper around the Google webfontloader library. Example usage:

import '@quantumblack/kedro-ui/lib/styles/app-no-webfont.css';
import LoadWebFont from '@quantumblack/kedro-ui/lib/utils/webfont.js';

LoadWebFont({
  active: function() {
    console.log('Font has been rendered');
  }
})

Running Kedro-UI locally

Kedro-UI has an interface based on react-styleguidist that allows you to interact with all the components during development. You can run the react-styleguidst server and start interacting with your components with the following command:

npm run start

📚 Documentation

We use styleguidist to document our comments and their usage. To try them out head over here.

👋 Contact

This project needs your help! If you have any questions email: [email protected]