Limbic

Limbic is a React component library used throughout OpenLoop's various projects.

Usage

Installation

yarn add @openloop/limbic

# or

npm install @openloop/limbic

Usage in your App

1. Add Limbic's styles to your application

// Entrypoint (App.js or index.js)
import '@openloop/limbic/scss/limbic.scss';

or

// index.scss
@import '~@openloop/limbic/scss/limbic.scss';

2. Wrap application tree in Limbic context provider

Some Limbic features (i.e. Toast) require a top-level context provider.

import { LimbicContext as LimbicProvider } from '@openloop/limbic';

const App = () => <LimbicProvider>{/* App components here */}</LimbicProvider>;

3. Import components as needed

import { Button } from '@openloop/limbic';

<Button>Submit</Button>;

Development

Limbic uses Storybook to develop and showcase our components.

1. Switch to the project specified node version

nvm use

2. Install the project dependancies

yarn install

3. To start storybook in development mode, run:

yarn start

4. Open http://localhost:6006 to view it in the browser. The page will reload if you make edits.

Additional Scripts

Please see the package.json file for any additional scripts that may be needed during development. You will find them under the scripts section.

Developer Notes

The following notes consist of information that may be important or good to keep in mind during development on this project. We can also use this area to note any environment bugs that dont fit into Linear or notion

How to add new SVGs