flame-react

The react implementation of the core atomic components of the flame design system.

📚 Storybook

Installing

npm install @lightspeed/flame-react

Initial setup

Install the fonts

Load the following fonts in your app:

<link
  href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext"
  rel="stylesheet"
/>

Wrap your application with the provider

import { FlameProvider } from '@lightspeed/flame-react/Core';

function App() {
  return (
  <FlameProvider>
    <div>The rest of your app</div>
  </FlameProvider>
  );
}

Automatic Namespacing

We use a namespacing strategy to enable proper treeshaking. What that means is for every index.ts file found within the src folder, we'll automatically create a root package index.js file which points to the proper location in the dist folder.

Unless you are removing folders from src, you shouldn't be touching package root exports e.g: ./Button/ as those are automatically generated during build.

Contributing

Ensure that you have pulled the entire monorepo and have @microsoft/rush installed globally

npm i -g @microsoft/rush

Next, make sure you've installed and bootstrapped the repo

rush install
rush build

Run commands using rushx within this subfolder.

# Launch storybook
rushx storybook

# Run tests
rushx test

# Run lint
rushx lint