@moller/design-system

Multi-brand React component library for Møller

@moller/design-system is a React component library containing reusable, multi-brand GUI building blocks for applications in the Møller ecosystem.

For instructions on developing components, see the Development docs.

Consuming the library

The library is published as @moller/design-system in the public npm registry. The prefix @moller is an npm scope associated with our organization on npm

Installing the library

Run the command

npm install @moller/design-system @moller/gnist-themes

Using the library

To use the library, the vanilla-extract plugin needs to be used. For Vite, you need

npm install -D @vanilla-extract/vite-plugin @vanilla-extract/esbuild-plugin

Your vite.config.ts might look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import { vanillaExtractPlugin as veEsbuildPlugin } from "@vanilla-extract/esbuild-plugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), vanillaExtractPlugin()],
    optimizeDeps: {
        esbuildOptions: {
            // Handle vanilla-extract .css.js files during Vite dev mode optimization
            // This prevents error "Styles were unable to be assigned to a file." in dev mode
            // See https://github.com/vanilla-extract-css/vanilla-extract/discussions/1051
            plugins: [veEsbuildPlugin({ runtime: true })],
        },
    },
});

In the application entrypoint, import the required global styles and choose a theme

import { LocalizationProvider } from "@moller/design-system";
// Import one or more of these themes
import { bilholdLight } from "@moller/gnist-themes/themes/bilholdLight.css.js";
import { gumpen } from "@moller/gnist-themes/themes/gumpen.css.js";
import { brandless } from "@moller/gnist-themes/themes/brandless.css.js";
import { mollerBil } from "@moller/gnist-themes/themes/mollerBil.css.js";
import { skodaDark } from "@moller/gnist-themes/themes/skodaDark.css.js";
import { vw } from "@moller/gnist-themes/themes/vw.css.js";
import { dahles } from "@moller/gnist-themes/themes/dahles.css.js";
import { autoria } from "@moller/gnist-themes/themes/autoria.css.js";
import { audi } from "@moller/gnist-themes/themes/audi.css.js";
import { cupra } from "@moller/gnist-themes/themes/cupra.css.js";
// Import global styles
import { globalTextStyles } from "@moller/gnist-themes/typography.css";
// Import necessary fonts (one or more, dependent on which themes are in use)
import "@moller/design-system/fonts/moller";
import "@moller/design-system/fonts/bilhold";
import "@moller/design-system/fonts/skoda";
import "@moller/design-system/fonts/gumpen";
import "@moller/design-system/fonts/VW";
import "@moller/design-system/fonts/dahles";
import "@moller/design-system/fonts/autoria";
import "@moller/design-system/fonts/audi";
import "@moller/design-system/fonts/cupra";
import "@moller/design-system/fonts/tools";

// Apply the theme
document.body.classList.add(bilholdLight);

// Apply global styles
globalTextStyles.forEach((c) => {
    document.body.classList.add(c);
});

export const App: React.FC = () => {
    return (
        <LocalizationProvider language="en">
            {/* ...the rest of your app here...*/}
        </LocalizationProvider>
    );
};

Next.js projects

If you are setting up in a Next.js project, the procedure is quite the same.

You will need to install and use @vanilla-extract/next-plugin.

With this setup, your next.config.mjs might look like this

import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withVanillaExtract(nextConfig);

If you are running a React version 18 project, you will also need to add this to your tsconfig.json for it to work with this React 17 library.

"paths": {
     ...
      "react": [ "./node_modules/@types/react"]
    }

Next, just add the styling to your layout.tsx file. It might look like this:

import { bilholdLight } from "@moller/gnist-themes/themes/bilholdLight.css.js";
import { globalTextStyles } from "@moller/gnist-themes/typography.css.js";
import "@moller/design-system/fonts/bilhold";

const bodyClassList = [bilholdLight, ...globalTextStyles];

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body className={bodyClassList.join(" ")}>{children}</body>
        </html>
    );
}

Finally, import components from @moller/design-system.