Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[C-3274, C-3348] Add README to Harmony #6663

Merged
merged 1 commit into from
Nov 13, 2023
Merged

[C-3274, C-3348] Add README to Harmony #6663

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions packages/harmony/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<p align="center">
<img height="288px" src="./src/storybook/assets/harmonyLogoDark.png#gh-dark-mode-only">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love we can use these local files, and sick with the #gh-dark-mode-only

<img height="288px" src="./src/storybook/assets/harmonyLogo.png#gh-light-mode-only">

<p align="center">
Harmony is design system focused on collaboration, reusability, and scalability.
</p>
<p align="center">
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.
</p>
<p align="center">
built with ❤️ from the team <a href="https://audius.org">@Audius</a>.
</p>
</p>

<br />
<br />

## Docs

Full documentation can be found here: [Harmony Docs](https://harmony.audius.co)

## Installation

Install `@audius/harmony` required peer dependencies:

```bash
npm install --save @emotion/react @emotion/styled @radix-ui/react-slot @react-spring/web classnames lodash react-lottie react-merge-refs react-perfect-scrollbar react-use react-use-measure
```

Then install `@audius/harmony`

```bash
npm install --save @audius/harmony
```

## Setup

Import styles exported by Harmony

```ts
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want to make a callout that this is optional? like if you are using sass/css, use this? i think we havent fully migrated yet so maybe we keep it, but potentially a callout we just get ahead on?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea for the time being we need this, but in the future if we have everything using emotion (and drop css variables support?) we can remove

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

Setup the ThemeProvider exported by Harmony

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

const App = () => {

return (
<HarmonyThemeProvider theme='day'>
...
</HarmonyThemeProvider>
)
}
```

## Usage

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

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

## Development

Run storybook (docs site):

```bash
npm run storybook
```

## Contribution

A Contribution Guide is [available here](https://www.notion.so/audiusproject/Submitting-for-Design-Updates-52a8bc3bb68747818a96d2721bace27f).