lakefront

Lakefront is a simple React component library.

Installation

Lakefront is available as an npm package.

// with npm
npm install @toyota-research-institute/lakefront

// with yarn
yarn add @toyota-research-institute/lakefront

Emotion's ThemeProvider must wrap your application for the components to style correctly.

import { ThemeProvider } from '@emotion/react';
import { theme } from '@toyota-research-institute/lakefront';

<ThemeProvider theme={theme}>
    ...
</ThemeProvider>

Usage

⚠️ LakeFront requires the client application to use React 18 as well as Node 18.x. ⚠️

Here is a quick example to get you started, it's all you need:

import { createRoot } from 'react-dom/client';
import { Button } from '@toyota-research-institute/lakefront';

function App() {
    return <Button>Hello World</Button>;
}

createRoot.render(<App />, document.querySelector('#app'));

Contributing

If you want to contribute to the action, even by just raising a problem or proposing an idea, you can click here to find out how to do it.

Storybook Components

We've added Storybook pages to show how each component can be used.

How to add components to this table

Upon a new component being added to this table run 'npm run update-readme' for boilerplate code. Please replace the three variables with the corresponding information as needed. Also, store screenshots of components in the 'screenshots' folder.

Please do not add information below this table, the 'npm run update-readme' will not work properly if the table is not last.

| Component | Picture | Component | Picture | |:------------------------------------------------------------------------------------------------------------------------------------------------------| :------- |:----------------------------------------------------------------------------------------------------------------------------------------------------------------| :------- | | AnchorCopy | Screenshot | BoundingBoxes | Screenshot | | Breadcrumb | Screenshot | Button | Screenshot | | Card | Screenshot | Checkbox | Screenshot | | CheckboxGroup | Screenshot | PopoverContent | Screenshot | | Collapsible | Screenshot | CopyButton | Screenshot | | Drawer | Screenshot | Filter | Screenshot | | AdditionalJSONFilter | Screenshot | DoubleMultiSelectFilter | Screenshot | | DurationFilter | Screenshot| ListFilter | Screenshot | | MultiSelectFilter | Screenshot | RadioFilter | Screenshot | | SingleSelectFilter | Screenshot | TextFilter | Screenshot | | Header | Screenshot | Input | Screenshot | | ItemGrid | Screenshot | ItemResults | Screenshot | | Loading | Screenshot | MaskableImage | Screenshot| | Modal | Screenshot | ConfirmationModal | Screenshot | | Page | Screenshot | PlaybackBar | Screenshot | | Progress | Screenshot | Circular Progress | Screenshot | | Device Progress | Screenshot | Progress Bar | Screenshot | | PropertyList | Screenshot | RadioGroup | Screenshot| | RefreshToolBar | Screenshot | Select | Screenshot | | SelectPopover | Screenshot | Snackbar | Screenshot | | SpeedInput | Screenshot | StackBanner | Screenshot | | StackBannerRow | Screenshot | StepFunctionAuthoring | Screenshot | | StatusTable | Screenshot | StepFunctionGraph | Screenshot | | StepFunctionRenderer | Screenshot | Table | Screenshot | | Tabs | Screenshot | TextArea | Screenshot | | Toggle | Screenshot | TypeaheadSearch |Screenshot | | ModeSelector | Screenshot |