Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lightspeed/flame
Component library for building Lightspeed products
https://github.com/lightspeed/flame
css-in-js design-system emotion react styled-system typescript
Last synced: 5 days ago
JSON representation
Component library for building Lightspeed products
- Host: GitHub
- URL: https://github.com/lightspeed/flame
- Owner: lightspeed
- License: other
- Created: 2019-09-10T21:45:57.000Z (over 5 years ago)
- Default Branch: next
- Last Pushed: 2024-12-18T23:11:55.000Z (about 2 months ago)
- Last Synced: 2025-01-28T22:02:09.664Z (12 days ago)
- Topics: css-in-js, design-system, emotion, react, styled-system, typescript
- Language: TypeScript
- Homepage:
- Size: 6.01 MB
- Stars: 77
- Watchers: 22
- Forks: 13
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
Component library for building Lightspeed products.
---
[](https://badge.fury.io/js/%40lightspeed%2Fflame) [](https://github.com/lightspeed/flame/actions) [](https://codecov.io/gh/lightspeed/flame)
### Storybook
For the deployed version of our development environment visit https://lightspeed-flame.netlify.com.
### Playground
Fork this CodeSandbox and start playing around with components:
[](https://codesandbox.io/s/lightspeed-flame-components-g6u5n)
## Installing
Install the package:
```sh
yarn add @lightspeed/flame
```
And its required peer dependencies:
```sh
yarn add react@^16 react-dom@^16 @emotion/core@^10 @emotion/styled@^10 emotion-theming@^10
```
## Getting Started
Before being able to implement Flame in your application, there are a few steps to bootstrap the components properly. We also assume that your React application is using a bundler such as webpack.
**Steps required:**
- Link fonts
- Hook the theme provider
- Load global styles
- Import components via their namespace
### Link fonts
There are two ways to load the proper fonts:
Add this `` tag to your `` to load the required fonts:
```html
```
### Hook the theme provider, load global styles, and import components
In order to have the proper styling, it is necessary to load the theme object into the application.
To do so, wrap the `` provider on your app and add `FlameGlobalStyles`:
```jsx
import React from 'react';
import { FlameTheme, FlameGlobalStyles } from '@lightspeed/flame/Core';
// Access components via their namespace
import { Button } from '@lightspeed/flame/Button';
import { Heading1, Text } from '@lightspeed/flame/Text';
// Within your root app component
class App extends React.Component {
render() {
return (
{/* Wrapping `
` is necessary since `` is a Provider */}
{/* We set some global styles, like fonts and minimal resets */}
{/* A Flame styled h1, paragraph, and button 🎉 */}
My heading
Welcome to Flame
It's happening!
);
}
}
```
**Please note**
If you have Emotion already installed and you would like to use the theme values provided from Flame, you will still need to wrap your application with an Emotion `` and pass in the theme object.
```jsx
import React from 'react';
import { FlameTheme, lightTheme } from '@lightspeed/flame/Core';
import { ThemeProvider } from 'emotion-theming';
class App extends React.Component {
render() {
return (
{/* ... */}
);
}
}
```
This is intentional since we do not want changes on `FlameTheme` to potentially affect your underlying components, as you might already have custom theme values being added.
## Testing your app with Flame components
It's important to wrap your tests with the appropriate theme provider. This is because some flame components requires theme values to be passed in order to compute new color values.
Before rendering your component inside of your tests, ensure you wrap it up with `FlameTheme`.
For example:
```jsx
describe('Some component', () => {
it('renders', () => {
const component = someTestRenderFunction(
,
);
});
});
```
## Getting started with server-side rendering (SSR)
Flame supports SSR out of the box without any additional configuration needed.
Since Flame uses the latest `@emotion` package, when loading components on the server, components will automatically have their styles extracted without any required setup.
## Styled System props
Many of flame components have been augmented with [Styled System](https://github.com/jxnblk/styled-system) props.
```jsx
This Alert will now have a margin bottom (mb) of 1.125rem. That value corresponds to the 3rd
spacing value of the design system.
```
These props are essentially a way to quickly customize various css properties of a component without the need of writing a custom css class or component. These props are automatically attached to the values of the design system, so long as the application was properly wrapped with the `` component.
_Please consult the packages READMEs for a list of all activated props:_
- [Flame](https://github.com/lightspeed/flame/tree/master/packages/flame/README.md)
## Contributing
See the [contributing guidelines](.github/CONTRIBUTING.md).
## Licenses
The source code is licensed with a [custom license](https://github.com/lightspeed/flame/blob/master/LICENSE).