React implementation of the Flume design system, which is used for consistent branding and design across all Gameflow services and interfaces.
# yarn
yarn add @gameflow-tv/flume
# npm
npm i @gameflow-tv/flume
Flume comes bundled with a global style bundle that sets up some global styles and provides utility CSS classes for vanilla CSS usage;
import styles from '@gameflow-tv/flume/bundle.css'
Flume comes with its built-in theme which is used by all components. In order to use the theme, wrap your app in ThemeProvider
:
import { ThemeProvider } from '@gameflow-tv/flume'
const App = () => {
return (
<ThemeProvider>
<App />
</ThemeProvider>
)
}
ThemeProvider
uses the Gameflow theme by default, but this can be swapped out for any theme that implements the Theme
interface:
const myTheme: Theme = {
/* Your theme */
}
return (
<ThemeProvider theme={myTheme}>
<App />
</ThemeProvider>
)
This package is made by developers and is consumed by developers. When adding new components to the library, keep in mind that any APIs you create should be:
- Simple
- Extensible
- Semantic
Every component must be responsive and accessible, and should be repesented with as few DOM elements as possible. For testing, you can use e.g. a11y
in Storybook or tools such as Lighthouse. We also recommend using screen readers and keyboard navigation for further testing.
This is a UI library. As such, we don't intend on writing more internal logic than what's required for UI purposes, leaving state management up to the consumer. This effectively lets consumers choose their own state management apporach, gain control over component behaviour and results in a more transparent library. Any internal behaviour determined by internally kept state must have a very good reasoning and such behaviour has to be explicitly documented.
This repository uses semantic-release for versioning. In order for us to automate the release process, we need to adhere to the commit message format specified by semantic-release.