Material UI Theme Preview

Birdz Logo

Installation and Usage Guide

Installation

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

  1. 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

  1. Install the theme:

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

  1. Install the required dependencies:

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

Theme Configuration

  1. 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

  1. Modify theme config in /src/theme/*

  2. 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

  1. 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

  1. Build new version bundle

pnpm build:theme

  1. Authenticate with GCP Artifact registry

pnpm artifactregistry-login

  1. Publish new version

npm publish

Colors

Main

primary
secondary
info
tertiary
error

Secondary

rainDrop
frenchManicure
hintOfMint

Others

aqua
eucalyptus
purple
lavender
gold
blush
inactive

Buttons

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

IDNameEmailRoleAction
1User 1user1@example.comAdminAction
2User 2user2@example.comEditorAction
3User 3user3@example.comViewerAction
4User 4user4@example.comAdminAction
5User 5user5@example.comEditorAction
6User 6user6@example.comViewerAction
7User 7user7@example.comAdminAction
8User 8user8@example.comEditorAction
9User 9user9@example.comViewerAction
10User 10user10@example.comAdminAction
11User 11user11@example.comEditorAction
12User 12user12@example.comViewerAction
13User 13user13@example.comAdminAction
14User 14user14@example.comEditorAction
15User 15user15@example.comViewerAction
16User 16user16@example.comAdminAction
17User 17user17@example.comEditorAction
18User 18user18@example.comViewerAction
19User 19user19@example.comAdminAction
20User 20user20@example.comEditorAction

Dialog

Chips

filled

primary
secondary
tertiary
error
info
lavender
gold
purple
inactive

outlined

primary
secondary
tertiary
error
info
lavender
gold
purple
inactive

disabled

primary
secondary
tertiary
error
info

clickable

primary
secondary
tertiary
error
info

DataGrid