Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/InseeFrLab/onyxia-ui

🌓 Onyxia UI toolkit
https://github.com/InseeFrLab/onyxia-ui

bluehats design material-ui react typescript ui-components

Last synced: 2 months ago
JSON representation

🌓 Onyxia UI toolkit

Awesome Lists containing this project

README 

        


      





    The Onyxia UI toolkit


    


    


    

    

    

    





  Documentation




This project is a React UI toolkit that implement a design system created for [Onyxia](https://onyxia.sh) by [Marc Hufschmitt](http://marchufschmitt.fr/).



This project provide [some custom components](https://inseefrlab.github.io/onyxia-ui/?path=/story/sandbox-alert--vue-no-title) but you can also use

any [MUI component](https://mui.com/) they will be automatically styled to fit the design system.



-   Optimized for typescript, theme customization without module augmentation.

-   Built in support for the dark mode.

-   If you want to diverge from the Onyxia Design system, the theme is customizable, you can for example change the fonts and the colors.

-   Provide splash screen that hide the screen when needed.

-   Icons are downloaded at runtime. [The full catalog of mui icons](https://mui.com/material-ui/material-icons/) is

    is available **at runtime**. (No hard import required)



Disclaimer: `onyxia-ui` is specifically designed to build SPA and is not SSR compatible.



A note about the integration of [Onyxia](https://onyxia.sh) and Onyxia-UI can be found [here](https://docs.onyxia.sh/contributing/onyxia/dependencies#onyxia-ui).



# Showcase



## [datalab.sspcloud.fr](https://datalab.sspcloud.fr/catalog/inseefrlab-helm-charts-datascience)





  

  

  

  

  

  

  




## [datalab.sspcloud.fr with "France" palette](https://datalab.sspcloud.fr/?palette=france&title=Etalab)





    

    




## [datalab.sspcloud.fr with "Ultraviolet" palette](https://datalab.sspcloud.fr/?palette=ultraviolet&title=AUS)





    

    




## [www.sspcloud.fr](https://www.sspcloud.fr)





    

    

    




# Quick start



```bash

yarn add onyxia-ui @mui/material @emotion/react @emotion/styled

```



## Icons



Onyxia-ui enables you to use icons from [the Material Design Library](https://mui.com/material-ui/material-icons/).  

Or to provide your own icon as SVG urls.



### Using Material Icons: With hard import



If you know what icon you'll need ahead of time, implement this approach:



```bash

yarn add @mui/icons-material

```



`src/theme.ts`



```ts

const { ThemeProvider } = createThemeProvider({

    // ...

    publicUrl: undefined,

});

```



Now if you want to use [AccessAlarms](https://mui.com/material-ui/material-icons/?selected=AccessAlarms)



```tsx

import AccessAlarmIcon from "@mui/icons-material/AccessAlarm";



;

```



### Using Material Icons: With lazy loading



If you don't know ahead of time what icon you will need. This is the case if your app

renders user generated content that might include icons then you can opt for downloading the

icons dynamically.  

Be aware that this involves including a 35MB directory of icons in your `public/` directory

which will end up impacting your docker image size.



```diff

"scripts": {

    "prepare": "copy-material-icons-to-public"

}

```



OPTIONAL: Use cache in your Workflow to speed up your CI pipeline



```yarn

    - uses: bahmutov/npm-install@v1

      env:

        XDG_CACHE_HOME: "/home/runner/.cache/yarn"

```



This will enable you to do this:



```tsx

import { Icon } from "onyxia-ui/Icon";



// https://mui.com/material-ui/material-icons/?selected=AccessAlarms

;

```



Or, if you want type safety:



```tsx

import { Icon } from "onyxia-ui/Icon";

import { id } from "tsafe/id";

import type { MuiIconComponentName } from "onyxia-ui/MuiIconComponentName";



// https://mui.com/material-ui/material-icons/?selected=AccessAlarms

("AccessAlarms")} />;

```



### Using custom SVGs as icons



```tsx

import myIconSvgUrl from "./assets/my-icon.svg";



```



## Documentation



The documentation is under the form of a very simple [demo project](https://github.com/garronej/onyxia-ui/tree/main/src/test).  

The actual theme configuration [happens here](https://github.com/garronej/onyxia-ui/blob/main/src/test/src/theme.ts).  

If you want to experiment with it you can run the demo app with:



NOTE for [Storybook](https://storybook.js.org) users: As of writing this lines storybook still uses by default emotion 10.  

mui and TSS runs emotion 11 so there is [some changes](https://github.com/garronej/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32)

to be made to your `.storybook/main.js` to make it uses emotion 11.



[Launch dev environment](https://datalab.sspcloud.fr/launcher/inseefrlab-helm-charts-datascience/vscode?autoLaunch=true&onyxia.friendlyName=«Onyxia-ui»&onyxia.share=true&s3.enabled=false&kubernetes.role=«admin»&security.allowlist.enabled=false&git.repository=«https%3A%2F%2Fgithub.com%2FInseeFrLab%2Fonyxia-ui»&init.personalInit=«https%3A%2F%2Fraw.githubusercontent.com%2FInseeFrLab%2Fonyxia-ui%2Fmain%2Fonyxia-init.sh»)



```bash

git clone https://github.com/garronej/onyxia-ui

cd onyxia-ui

yarn

yarn build

yarn start

```