@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.
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
Run the command
npm install @moller/design-system @moller/gnist-themes
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>
);
};
If you are setting up in a Next.js project, the procedure is a bit different.
- You will need to add the design system packages to
transpilePackages
. - You will also need to specify the use of styled components in the
compiler
options. - 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 = {
compiler: {
styledComponents: true,
},
transpilePackages: ["@moller/design-system"],
};
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
.