doc config fix (#15)

Author: upalatucci

styleguide/components/Logo/index.tsx

@@ -1,29 +1,23 @@
 import React, { PropsWithChildren } from 'react';
-import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
 import { Theme } from 'react-styleguidist/lib/typings/RsgTheme';
+import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 
 import logo from './logo.png';
 
-const styles = ({ fontFamily, fontSize }: Theme) => ({
+const styles = ({ fontFamily }: Theme) => ({
   logo: {
     display: 'flex',
     alignItems: 'center',
-    margin: 0,
     fontFamily: fontFamily.base,
-    fontSize: fontSize.h1,
-    fontWeight: 'normal',
+    fontSize: 18,
   },
   image: {
     width: '2.5em',
     marginRight: '0.5em',
   },
 });
 
-interface LogoProps {
-  classes: Record<string, string>;
-}
-
-function LogoRenderer({ classes, children }: PropsWithChildren<LogoProps>) {
+function LogoRenderer({ classes, children }: PropsWithChildren<JssInjectedProps>) {
   return (
     <h1 className={classes.logo}>
       <img src={logo} alt="Kubevirt UI" className={classes.image} />

styleguide/styles.ts

@@ -1,23 +1,23 @@
 import { Theme } from 'react-styleguidist/lib/typings/RsgTheme';
 
-module.exports = {
-  styles: (theme: Theme) => {
-    return {
-      Playground: {
-        preview: {
-          paddingLeft: 0,
-          paddingRight: 0,
-          borderWidth: [[0, 0, 1, 0]],
-          borderRadius: 0,
-        },
+const style = (theme: Theme) => {
+  return {
+    Playground: {
+      preview: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        borderWidth: [[0, 0, 1, 0]],
+        borderRadius: 0,
       },
-      Code: {
-        code: {
-          // make inline code example appear the same color as links
-          color: theme.color.link,
-          fontSize: 14,
-        },
+    },
+    Code: {
+      code: {
+        // make inline code example appear the same color as links
+        color: theme.color.link,
+        fontSize: 14,
       },
-    };
-  },
+    },
+  };
 };
+
+export default style;

styleguide/theme.ts

@@ -18,4 +18,4 @@ const customTheme: Partial<Theme> = {
   },
 };
 
-module.exports = customTheme;
+export default customTheme;

tsconfig.json

@@ -14,7 +14,10 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "paths": {
+      "rsg-components/*": ["./node_modules/react-styleguidist/lib/client/rsg-components/*"]
+    }
   },
   "exclude": ["/node_modules/"]
 }