vcc-ui/_src/story-wrapper.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from "react";
import { select, boolean } from "@storybook/addon-knobs";
import { ThemeProvider, RendererProvider } from "react-fela";

import { styleRenderer } from "./style-renderer";

import volvoTheme from "./themes/volvo";
import polestarTheme from "./themes/polestar";

const renderer = styleRenderer();

const themes = {
	volvo: volvoTheme,
	polestar: polestarTheme
};
let currentTheme = "volvo";

export function ThemeWrapper({ children }) {
	const theme = select("theme", Object.keys(themes), currentTheme);
	currentTheme = theme;
	const rtl = boolean("rtl", false);

	const dir = rtl ? "rtl" : "ltr";

	document.body.setAttribute("dir", dir);

	return (
		<ThemeProvider
			theme={{
				...themes[theme],
				logoImagesPath: "/static/vcc-ui/images/",
				fontsPath: "/static/vcc-ui/fonts/",
				direction: dir
			}}
		>
			{children}
		</ThemeProvider>
	);
}

export function StoryWrapper({ children }) {
	return (
		<RendererProvider renderer={renderer}>
			<ThemeWrapper>{children}</ThemeWrapper>
		</RendererProvider>
	);
}