diff --git a/README.md b/README.md index 7f3ad94d3..5bbc1d067 100644 --- a/README.md +++ b/README.md @@ -13,43 +13,43 @@ Packages ![GitHub package.json dependency version (prod) - immutable](https://img.shields.io/github/package-json/dependency-version/graasp/graasp-ui/immutable?color=plum) [![Mui version](https://img.shields.io/badge/mui-v5-deepskyblue?logo=mui)](https://mui.com/material-ui/getting-started/overview/) -## Install +## Adding the library to your project -```bash -npm install --save @graasp/ui -``` - -If you use the `Table` component, you should import it with the lines below: +You will have to add the library and its peer dependencies: -```js -import { Table } from '@graasp/ui/dist/table'; -import 'ag-grid-community/dist/styles/ag-theme-material.min.css'; -```` +```sh +yarn add @graasp/ui @graasp/stylis-plugin-rtl date-fns lucide-react +``` ## Usage ```tsx -import React, { Component } from 'react' +import { MyComponent } from '@graasp/ui' -import MyComponent from '@graasp/ui' -import '@graasp/ui/dist/index.css' - -class Example extends Component { - render() { - return - } +const Example = () => { + return } ``` +### Sub packages + +#### Components for Graasp Apps + +Graasp apps can use specific components to share style without needing to import the full bundle: use import from `@graasp/ui/apps` + +#### Text Editor + +Since Quill does not play nicely with SSR frameworks (access to the document property is not gated), it is exposed in its own sub-package: `@graasp/ui/text-editor` + ## ![Storybook](https://api.iconify.design/logos/storybook-icon.svg) Storybook Storybook provides a nice display of defined UI components. To open the framework, run -``` +```sh yarn storybook ``` -To navigate the UI components click the link bellow: +To explore the UI components and play with their props click the link bellow: