refactor(cli): improve typings for story format

lib/cli/src/GeneratorOptions.ts

@@ -1,4 +1,5 @@
+import { StoryFormat } from './project_types';
+
 export type GeneratorOptions = {
-  // TODO: Make this type more strict
-  storyFormat: string;
+  storyFormat: StoryFormat;
 };

lib/cli/src/generators/ANGULAR/index.ts

@@ -14,7 +14,7 @@ import {
   writeFileAsJson,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -26,7 +26,7 @@ async function addDependencies(npmOptions: NpmOptions, { storyFormat }: Generato
     '@storybook/addons',
   ];
 
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
 

lib/cli/src/generators/HTML/index.ts

@@ -6,7 +6,7 @@ import {
   installDependencies,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -14,7 +14,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
   const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links'];
 
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
 

lib/cli/src/generators/REACT/index.ts

@@ -6,7 +6,7 @@ import {
   installDependencies,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -17,7 +17,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
     '@storybook/addon-links',
     '@storybook/addons',
   ];
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
 

lib/cli/src/generators/REACT_SCRIPTS/index.ts

@@ -8,7 +8,7 @@ import {
   installDependencies,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -21,7 +21,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
     '@storybook/addons',
   ];
 
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
 

lib/cli/src/generators/SFC_VUE/index.ts

@@ -6,7 +6,7 @@ import {
   installDependencies,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -17,7 +17,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
     '@storybook/addon-links',
     '@storybook/addons',
   ];
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);

lib/cli/src/generators/VUE/index.ts

@@ -8,7 +8,7 @@ import {
   addToDevDependenciesIfNotPresent,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -21,7 +21,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
     'babel-preset-vue',
     '@babel/core',
   ];
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);

lib/cli/src/generators/WEB-COMPONENTS/index.ts

@@ -7,7 +7,7 @@ import {
   getBabelDependencies,
   installDependencies,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -23,7 +23,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
 
   fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
 
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     // TODO: handle adding of docs mode
   }
 

lib/cli/src/generators/WEBPACK_REACT/index.ts

@@ -6,7 +6,7 @@ import {
   installDependencies,
   copyTemplate,
 } from '../../helpers';
-import { STORY_FORMAT } from '../../project_types';
+import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { GeneratorOptions } from '../../GeneratorOptions';
 
@@ -17,7 +17,7 @@ export default async (npmOptions: NpmOptions, { storyFormat }: GeneratorOptions)
     '@storybook/addon-links',
     '@storybook/addons',
   ];
-  if (storyFormat === STORY_FORMAT.MDX) {
+  if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);

lib/cli/src/helpers.test.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import fse from 'fs-extra';
 
 import * as helpers from './helpers';
-import { STORY_FORMAT } from './project_types';
+import { StoryFormat } from './project_types';
 
 jest.mock('fs', () => ({
   existsSync: jest.fn(),
@@ -23,24 +23,24 @@ jest.mock('./npm_init', () => ({
 
 describe('Helpers', () => {
   describe('copyTemplate', () => {
-    it(`should fall back to ${STORY_FORMAT.CSF} 
-        in case ${STORY_FORMAT.CSF_TYPESCRIPT} is not available`, () => {
-      const csfDirectory = `template-${STORY_FORMAT.CSF}/`;
+    it(`should fall back to ${StoryFormat.CSF} 
+        in case ${StoryFormat.CSF_TYPESCRIPT} is not available`, () => {
+      const csfDirectory = `template-${StoryFormat.CSF}/`;
       (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
         return filePath === csfDirectory;
       });
-      helpers.copyTemplate('', STORY_FORMAT.CSF_TYPESCRIPT);
+      helpers.copyTemplate('', StoryFormat.CSF_TYPESCRIPT);
 
       const copySyncSpy = jest.spyOn(fse, 'copySync');
       expect(copySyncSpy).toHaveBeenCalledWith(csfDirectory, expect.anything(), expect.anything());
     });
 
-    it(`should use ${STORY_FORMAT.CSF_TYPESCRIPT} if it is available`, () => {
-      const csfDirectory = `template-${STORY_FORMAT.CSF_TYPESCRIPT}/`;
+    it(`should use ${StoryFormat.CSF_TYPESCRIPT} if it is available`, () => {
+      const csfDirectory = `template-${StoryFormat.CSF_TYPESCRIPT}/`;
       (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
         return filePath === csfDirectory;
       });
-      helpers.copyTemplate('', STORY_FORMAT.CSF_TYPESCRIPT);
+      helpers.copyTemplate('', StoryFormat.CSF_TYPESCRIPT);
 
       const copySyncSpy = jest.spyOn(fse, 'copySync');
       expect(copySyncSpy).toHaveBeenCalledWith(csfDirectory, expect.anything(), expect.anything());

lib/cli/src/helpers.ts

@@ -9,7 +9,7 @@ import stripJsonComments from 'strip-json-comments';
 
 import { latestVersion } from './latest_version';
 import { npmInit } from './npm_init';
-import { STORY_FORMAT } from './project_types';
+import { StoryFormat } from './project_types';
 import { PackageJson } from './PackageJson';
 import { NpmOptions } from './NpmOptions';
 
@@ -326,13 +326,12 @@ export function addToDevDependenciesIfNotPresent(
   }
 }
 
-// TODO: Improve typings of storyFormat
-export function copyTemplate(templateRoot: string, storyFormat: string) {
+export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) {
   const templateDir = path.resolve(templateRoot, `template-${storyFormat}/`);
   if (!fs.existsSync(templateDir)) {
     // Fallback to CSF plain first, in case format is typescript but template is not available.
-    if (storyFormat === STORY_FORMAT.CSF_TYPESCRIPT) {
-      copyTemplate(templateRoot, STORY_FORMAT.CSF);
+    if (storyFormat === StoryFormat.CSF_TYPESCRIPT) {
+      copyTemplate(templateRoot, StoryFormat.CSF);
       return;
     }
 

lib/cli/src/initiate.ts

@@ -6,7 +6,7 @@ import { hasYarn } from './has_yarn';
 import {
   installableProjectTypes,
   ProjectType,
-  STORY_FORMAT,
+  StoryFormat,
   SUPPORTED_LANGUAGES,
 } from './project_types';
 import {
@@ -60,8 +60,8 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 
   const defaultStoryFormat =
     detectLanguage() === SUPPORTED_LANGUAGES.TYPESCRIPT
-      ? STORY_FORMAT.CSF_TYPESCRIPT
-      : STORY_FORMAT.CSF;
+      ? StoryFormat.CSF_TYPESCRIPT
+      : StoryFormat.CSF;
 
   const generatorOptions = {
     storyFormat: options.storyFormat || defaultStoryFormat,

lib/cli/src/project_types.ts

@@ -54,11 +54,11 @@ export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [
   'rax',
 ];
 
-export const STORY_FORMAT = {
-  CSF: 'csf',
-  CSF_TYPESCRIPT: 'csf-ts',
-  MDX: 'mdx',
-};
+export enum StoryFormat {
+  CSF = 'csf',
+  CSF_TYPESCRIPT = 'csf-ts',
+  MDX = 'mdx',
+}
 
 export const SUPPORTED_LANGUAGES = {
   JAVASCRIPT: 'javascript',