Sirge Component Library

The component library is built on top of Material ui contains re-usable components, the theme and other utility functions.

How to realse a new version

After working on your changes, bump a new version in package.json and package-lock.json and update CHANGELOG.md accordingly. Once you merge your branch to the production branch a new version will be released.

Project Structure

   .
├── ...
├── src
│   ├── components      # Contains all the components
│   ├── Theme           #  Contains the customized Material UI theme.
│   └──
├── .stories            # Contains the stories for each of the components
|   ├──
├── .storybook          # Contains Storybook configuration
|   ├──
├── .github
|   ├──                 # Github actions
│   └──
|

Storybook

To strat storybook, inside the terminal, run

npm run storybook

This loads the stories from ./stories.

Required libraries

Before installing the this component lib, make sure you have the following libraries installed

• Material ui
• Material ui icon
• React-intl
• React-router-dom@6

How to use the Theme

This component lib comes with a pre-configured theme. The theme has been built on top of Material UI Theme and customized according to Sirge design. To use the theme in your app, use the ThemeProvider comonent that comes with MUI to inject the theme, see example below.

import { ThemeProvider } from '@mui/material/styles';
import { theme } from '@sirge/sirge-component-lib'
.......

<ThemeProvider theme={theme}>
   <App />
</ThemeProvider>

How to access the Theme in a component.

1. You can use useTheme hook provided by MUI as follows

import { useTheme } from '@mui/material/styles';

function MyComponent() {
  const theme = useTheme();

  return <span>{`spacing ${theme.spacing}`}</span>;
}

2. You also have access to theme via the sx props, Check the details on how to use sx props from here.

   <Button sx ={{ color: 'primary.main' }}>

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Rollup

TSDX uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.

Continuous Integration

GitHub Actions

Two actions are added by default:

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit

Optimizations

Please see the main tsdx optimizations docs. In particular, know that you can take advantage of development-only optimizations:

Named Exports

Per Palmer Group guidelines, always use named exports. Code split inside your React app instead of your React library.

Publishing to NPM

We recommend using np.

Usage with Lerna

When creating a new package with TSDX within a project set up with Lerna, you might encounter a Cannot resolve dependency error when trying to run the example project. To fix that you will need to make changes to the package.json file inside the example directory.

The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's package.json might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.

Change the alias to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.

   "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom"
+    "react": "../../../node_modules/react",
+    "react-dom": "../../../node_modules/react-dom"
   },

An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. However, that might cause other problems.