flame-react
The react implementation of the core atomic components of the flame design system.
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