Sofar Sounds' Maestro is a React component library which is built after our official design system and helps our developers build a consistent user experience.
Sofar Sounds is reimagining the live event experience through curated, intimate performances in 438 cities around the world.
@sofarsounds/maestro is serverd as an npm package.
Add Maestro to your project by running
// with npm
npm add @sofarsounds/maestro
// with yarn
yarn add @sofarsounds/maestro
Don't forget to also install styled-components ^4.0.0.
Since we're using styled-components and are providing all styling via theme it is necessary
that you wrap your entire application within the ThemeProvider. In addition to that, you can
provide the GlobalStyle we have created which automatically provides our brand font (Open Sans) and does some basic HTML styling.
import { ThemeProvider, GlobalStyle, theme } from '@sofarsounds/maestro'
<ThemeProvider theme={theme}>
<GlobalStyle />
<YourApplication />
</ThemeProvider>All of our components are exported directly so you can simply import any component like this:
import { H1, Body, PrimaryButton} from '@sofarsounds/maestro'
<H1>A Heading 1</H1>
<Body>A body text...</Body>
<PrimaryButton>A Button</PrimaryButton>For a live preview please check out our Storybook.
For local developing you can start up storybook to see the changes you're making. For that simply
run
yarn start
Your browser will open storybook automatically, should that not be the case go to http://localhost:6006.
Here are a few guidelines:
- Make sure you split components appropriately. We believe in splitting components up into atoms, molecules and organisms.
- If you build logic that can be re-used (styling etc) create a
with{Logic}util in the utils folder. - Before writing new utils, check that your util hasn't already been built
- Everything should be tested. We prefer writing tests that check style-rules rather than creating snapshots. Check out jest-styled-components for help and guides
We're hoping to make Maestro fully open source and would appreciate any contributions you make.
Please feel free to open an issue and report any Bugs or Feature Requests.