Material UI Theme Preview

Installation and Usage Guide

Installation

Gitlab: g.birdz.com/cnd/shared/node_libs/birdz-mui

Add private npm info

Create a file named .npmrc at root

@birdz:registry=https://europe-west1-npm.pkg.dev/bdz-cnd-prd/gar-prd-cnd-birdz-npm/
//europe-west1-npm.pkg.dev/bdz-cnd-prd/gar-prd-cnd-birdz-npm/:always-auth=true

Install the theme:

pnpm dlx google-artifactregistry-auth
pnpm install @birdz/mui-theme

Install the required dependencies:

pnpm install @emotion/cache @emotion/core @emotion/styled @mui/icons-material @mui/material @mui/material-nextjs

Theme Configuration

Import the theme and default font in your main file (usually layout.tsx):

import React from "react";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "@birdz/mui-theme";
import { Montserrat } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";

const montserrat = Montserrat({
  variable: "--font-montserrat",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <html lang="en" className={montserrat.variable}>
      <body>
        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>{children}</ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Contribution Guide

Test changes

Modify theme config in /src/theme/*
Start local NextJs dev server

pnpm install
pnpm dev

Publish new version

You cannot republish an existing version, you have to create a new one or destroy the version you're trying to publish

Change package version in package.json This repo uses semantic versioning with the format x.y.z:

Version Components

x (major) - Increment when you make breaking changes that aren't backward compatible. Users upgrading will likely need to modify their code.
y (minor) - Increment when you add new features that are backward compatible. Existing functionality still works the same way.
z (patch) - Increment when you fix bugs without changing the API or adding features. Pure bug fixes and small improvements.

Examples

1.0.0 → 2.0.0: You removed a function or changed how an existing function works
1.0.0 → 1.1.0: You added a new function but didn't change existing ones
1.0.0 → 1.0.1: You fixed a bug in an existing function

Build new version bundle

pnpm build:theme

Authenticate with GCP Artifact registry

pnpm artifactregistry-login

Publish new version

npm publish

Colors

Main

primary

secondary

info

tertiary

error

Secondary

rainDrop

frenchManicure

hintOfMint

Others

aqua

eucalyptus

purple

Buttons

Color

Typography

h1 — Portez ce vieux whisky au juge blond qui fume

h2 — Portez ce vieux whisky au juge blond qui fume

h3 — Portez ce vieux whisky au juge blond qui fume

h4 — Portez ce vieux whisky au juge blond qui fume

h5 — Portez ce vieux whisky au juge blond qui fume

h6 — Portez ce vieux whisky au juge blond qui fume

body1 — Portez ce vieux whisky au juge blond qui fume

Table

ID	Name	Email	Role	Action
1	User 1	user1@example.com	Admin	Action
2	User 2	user2@example.com	Editor	Action
3	User 3	user3@example.com	Viewer	Action
4	User 4	user4@example.com	Admin	Action
5	User 5	user5@example.com	Editor	Action
6	User 6	user6@example.com	Viewer	Action
7	User 7	user7@example.com	Admin	Action
8	User 8	user8@example.com	Editor	Action
9	User 9	user9@example.com	Viewer	Action
10	User 10	user10@example.com	Admin	Action
11	User 11	user11@example.com	Editor	Action
12	User 12	user12@example.com	Viewer	Action
13	User 13	user13@example.com	Admin	Action
14	User 14	user14@example.com	Editor	Action
15	User 15	user15@example.com	Viewer	Action
16	User 16	user16@example.com	Admin	Action
17	User 17	user17@example.com	Editor	Action
18	User 18	user18@example.com	Viewer	Action
19	User 19	user19@example.com	Admin	Action
20	User 20	user20@example.com	Editor	Action