@toyota-research-institute/lakefront

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