Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.
/ flume Public archive

Gameflow's own design system, Flume. Implemented in TypeScript with a React UI library and adapters for TailwindCSS.

Notifications You must be signed in to change notification settings

gameflow-tv/flume

Repository files navigation

Flume

semantic-release Commitizen friendly

React implementation of the Flume design system, which is used for consistent branding and design across all Gameflow services and interfaces.

Usage

Install

# yarn
yarn add @gameflow-tv/flume

# npm
npm i @gameflow-tv/flume

Theming

CSS/SCSS

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'

React/JSX

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>
)

Development

Consumer APIs

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

Requirements

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.

Semantic versioning

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.

About

Gameflow's own design system, Flume. Implemented in TypeScript with a React UI library and adapters for TailwindCSS.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published