ComeOn Backoffice UI

ComeOn Backoffice UI is a UI Kit for microfrontends hosted in microservices but baked into backoffice.

The components used can be seen below: https://comeon-backoffice-ui-dot-comeon-web-services.appspot.com/

Then go visit http://localhost:6006

Usage

This UI kit uses react and mui.

Installation

Before installing install all the missing peer dependencies

yarn add react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/styled-engine-sc styled-components

Install using:

yarn add @comeon/comeon-backoffice-ui

Setup the theme

// Inside App.jsx
import { ThemeProvider, StylesProvider } from '@mui/material';
import { createTheme } from '@comeon/comeon-backoffice-ui';

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <RestOfMyApp />
    </ThemeProvider>
  );
}

export default App;

Using components

See https://comeon-backoffice-ui-dot-comeon-web-services.appspot.com/ for usage and available components.

Development

When developing new features, do it by creating storybook stories.

Alternative to link, using Yalc

Install yalc

yarn global add yalc

In comeon-backoffice-ui run

yarn install

yalc publish
yarn start

In another terminal in comeon-backoffice-ui

yarn global add nodemon

# This will update your package every time you make changes
nodemon -x 'yalc push'

In you app: Add .yalc and yalc.lock to your .gitignore

In you app in a terminal

yalc link @comeon/comeon-backoffice-ui

Using Yarn Link (not needed if using yalc)

If you want to test out the changes in a real app, you'll need to do some yarn link magic

Open up a terminal.. lets call it Terminal 1

# Go to your react app that will use this comeon-backoffice-ui
cd ~/workspaces/my-react-app

yarn install

# Inside the root react app (not this library), create react and material-ui links
cd node_modules/react && yarn link && cd ../styled-components && yarn link && cd ../@material-ui/core && yarn link && cd ../../..

Open a new terminal, lets call it Terminal 2

# Go to comeon-backoffice-ui the library
cd ~/workspaces/comeon-backoffice-ui

yarn install

# Link the peer dependencies from the main app
yarn link @material-ui/core && yarn link react && yarn link styled-components && yarn link react-dom

# create a link for comeon-backoffice-ui
yarn link

# Start the lib to watch and build changes
yarn start

Go back to Terminal 1, inside your react app

yarn link "@comeon/comeon-backoffice-ui"

# Start you application server
yarn start

Unlinking the depencies

To unlink everything do the following:

In Terminal 1

cd node_modules/react && yarn unlink && cd ../@material-ui/core && yarn unlink && cd ../../.. && yarn unlink "@comeon/comeon-backoffice-ui"

yarn install --force

In Terminal 2

yarn unlink && yarn unlink react && yarn unlink "@material-ui/core"

yarn install --force

About Yarn link

Yarn link makes it so that npm packages run against your local environment instead. There are a few problems when linking and using react and material-ui that can be found here. It has to do with there being multiple instances of react and material-ui.