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({ devMode: true });

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>
  );
}