@audius/harmony

Harmony is design system focused on collaboration, reusability, and scalability.

It aims to harmonize code and Figma, provide a shared language for designers and developers, and provide consistent, reusable components for use across our platforms.

built with ❤️ from the team @Audius.

Docs

Full documentation can be found here: Harmony Docs

Installation

Install @audius/harmony:

npm install --save @audius/harmony

Due to an issue with react-virtualized, if using vite you must also install a plugin to fix the build: https://www.npmjs.com/package/esbuild-plugin-react-virtualized

npm install --save-dev esbuild-plugin-react-virtualized

Follow the instructions to add the plugin to your vite config:

// vite.config.js
import { defineConfig } from 'vite'
import fixReactVirtualized from 'esbuild-plugin-react-virtualized'

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [fixReactVirtualized],
    },
  },
})

For more information, see: https://github.com/bvaughn/react-virtualized/issues/1722

Setup

Import styles exported by Harmony

import '@audius/harmony/dist/harmony.css'

Setup the ThemeProvider exported by Harmony

import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'

const App = () => {
  return <HarmonyThemeProvider theme='day'>...</HarmonyThemeProvider>
}

In order use emotion yourself, follow their documentation for setting up the css-prop

If using typescript you will need to:

• Add an emotion.d.ts file and include the following for access to harmony's theme type

import '@emotion/react'
import type { HarmonyTheme } from '@audius/harmony'

declare module '@emotion/react' {
  export interface Theme extends HarmonyTheme {}
}

• Update your tsconfig to specify the jsxImportLocation:

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react",
    ...
  }
}

Usage

import { Button, Flex } from '@audius/harmony'

const App = () => {
  return (
    <Flex gap='m'>
      <Button variant='secondary'>Click This!</Button>
      <Button>Click That!</Button>
    </Flex>
  )
}

Development

Run storybook (docs site):

npm run storybook

Contribution

A Contribution Guide is available here.