FIX && IMPROVE typings

lib/addons/src/types.ts

@@ -24,6 +24,8 @@ export type ViewMode = 'story' | 'docs';
 export interface Parameters {
   fileName?: string;
   options?: OptionsParameter;
+  layout?: 'centered' | 'fullscreen' | 'padded';
+  docsOnly?: boolean;
   [key: string]: any;
 }
 

lib/core/src/client/preview/StoryRenderer.tsx

@@ -19,8 +19,26 @@ interface RenderMetadata {
   viewMode: ViewMode;
 }
 
-type Layout = 'centered' | 'fullscreen' | 'padded';
+type Layout = keyof typeof layouts;
-type StyleKeyValue = { centered: string; fullscreen: string; padded: string };
+
+const layouts = {
+  centered: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    margin: 0,
+    padding: '1rem',
+    boxSizing: 'border-box',
+  },
+  fullscreen: {
+    margin: 0,
+  },
+  padded: {
+    margin: 0,
+    padding: '1rem',
+  },
+} as const;
 
 const classes = {
   MAIN: 'sb-show-main',
@@ -47,7 +65,7 @@ export class StoryRenderer {
 
   previousMetadata?: RenderMetadata;
 
-  previousStyles?: string;
+  previousStyles?: typeof layouts[keyof typeof layouts];
 
   constructor({
     render,
@@ -97,7 +115,7 @@ export class StoryRenderer {
     const metadata: RenderMetadata = {
       id,
       kind,
-      viewMode: docsOnly ? 'docs' : (urlViewMode as ViewMode),
+      viewMode: docsOnly ? 'docs' : urlViewMode,
       revision: storyStore.getRevision(),
     };
 
@@ -201,24 +219,6 @@ export class StoryRenderer {
   }
 
   applyLayout(layout: Layout) {
-    const layouts: StyleKeyValue = {
-      centered: `
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        margin: 0;
-        padding: 1rem;
-        box-sizing: border-box;
-      `,
-      fullscreen: `
-        margin: 0;
-      `,
-      padded: `
-        margin: 0;
-        padding: 1rem;
-      `,
-    };
     const styles = layouts[layout] || layouts.padded;
 
     if (styles !== this.previousStyles) {