How to use

Installation

Install the UI kit using npm:

npm install lm-uikit

Use the provider

The provider helps passing some theming and options to the UI kit:

import ThemeProvider from "lm-uikit/lib/ThemeProvider";

const App: React.FC = props => {
    <ThemeProvider palette={{ primary: { main: '#3AD4A7' } }}>
        // Content here
    </ThemeProvider>
};

The provider has the following props:

palette

Send the theme colors used to the UI kit. The palette has the following interface:

type PaletteColor = {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

type Palette = {
  primary?: PaletteColor
  secondary?: PaletteColor
  error?: PaletteColor
  warning?: PaletteColor
  info?: PaletteColor
  success?: PaletteColor
}

Only the main value is mandatory. If light and dark are not set, they are computed automatically from the main color.

typography

Needed to let the UI kit to know about some typography changes done in the application. The options are:

type Typography = {
  htmlFontSize: number // Set the base font size in the application when changed using rem
}

The htmlFontSize option is needed when the base font size is changed using rem values. Click here for further information.

Components

TextField

Based on Material ui component outlined text field:

https://material-ui.com/es/components/text-fields/

import TextField from "lm-uikit/lib/TextField";

<TextField
	label='Name'
	value={name}
	onChange={ev => {}}
/>

Switch

Based on react-switch:

import Switch from "lm-uikit/lib/Switch";

<Switch checked={checked} onChange={() => setChecked(c => !c)} />

Select

Based on react-select:

import Select from "lm-uikit/lib/Switch";

const selectOptions = [
  { label: "January", value: "1" },
  { label: "February", value: "2" },
  { label: "March", value: "3" }
  // ...
];

<Select defaultValue={[selectOptions[1], selectOptions[2]]} options={selectOptions} isMulti />