feat: initial values data testing

.vscode/launch.json

@@ -211,7 +211,7 @@
       "name": "jest cc-cli",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/cc-cli",
-      "args": ["cli-store"],
+      "args": ["cli-document-data"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/core/src/configuration.ts

@@ -9,18 +9,19 @@ import {
 import { BuildProps } from './build';
 import { StoryProps } from './common';
 import { ActionItems } from './utility';
-import { Story, Document } from './document';
+import { Story, Document, ExampleControls } from './document';
 import { SearchOptions } from './search';
 import { TokenOptions } from './tokens';
 
 /**
  * render function by framework. By default 'react'
  */
-export type FrameworkRenderFn = (
-  story: Story,
-  doc?: Document,
-  options?: any,
-) => ReactElement;
+export type FrameworkRenderFn = (props: {
+  story: Story;
+  doc?: Document;
+  values?: ExampleControls;
+  options?: any;
+}) => ReactElement;
 
 /**
  * story type pages can have multiple tabs with separate page configurations.

core/core/src/document.ts

@@ -129,12 +129,7 @@ export type Story<Props = any> = {
 export type DynamicExamples = Story[];
 
 export type ExampleControls = {
-  [name: string]:
-    | ComponentControl<ExampleControls>
-    | string
-    | string[]
-    | boolean
-    | number;
+  [name: string]: ComponentControl<ExampleControls> | any;
 };
 
 /**

core/render/src/react.tsx

@@ -7,7 +7,7 @@ import {
   FrameworkRenderFn,
 } from '@component-controls/core';
 
-export const render: FrameworkRenderFn = (story, doc, options: any = {}) => {
+export const render: FrameworkRenderFn = ({ story, doc, options }) => {
   if (!story) {
     throw new Error(`Invalid story`);
   }
@@ -20,7 +20,7 @@ export const render: FrameworkRenderFn = (story, doc, options: any = {}) => {
     controls,
     ...options,
   };
-  const { decorators: globalDecorators = [] } = options;
+  const { decorators: globalDecorators = [] } = options || {};
   const { decorators: storyDecorators = [] } = story;
   const decorators = deepMerge<StoryRenderFn[]>(
     globalDecorators,

examples/simple/src/Component.test.ts

@@ -16,7 +16,7 @@ describe('Component', () => {
   describe('main', () => {
     const example = main;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,

plugins/cc-cli/src/cli/args.ts

@@ -3,7 +3,7 @@ import {
   defaultCliArgs,
 } from '@component-controls/webpack-compile/cli';
 
-import { renderers } from '../types';
+import { renderers } from '../utils';
 
 export const jestCliArgs: ArgOptions = [
   ...defaultCliArgs.filter(arg => arg.name === 'config'),

plugins/cc-cli/src/cli/cli-store.ts

@@ -1,5 +1,5 @@
-import { CliOptions } from './types';
-import { saveTemplate } from './save-template';
+import { CliOptions } from './utils';
+import { saveTemplate } from './save-test-template';
 import { createStoreTemplate } from '../jest-templates/store-template';
 
 /**
@@ -19,6 +19,7 @@ export const cliStore = async (options: CliOptions): Promise<void> => {
     include,
     exclude,
     ally,
+    data,
   } = options;
   const test =
     userTest || `component-controls.test.${format === 'ts' ? 'ts' : 'js'}`;
@@ -35,6 +36,7 @@ export const cliStore = async (options: CliOptions): Promise<void> => {
       include,
       exclude,
       ally,
+      data,
     },
     createStoreTemplate,
   );

plugins/cc-cli/src/cli/cli-story.ts

@@ -1,9 +1,9 @@
 import path from 'path';
 import { loadConfig, extractDocuments } from '@component-controls/config';
 import { loadStore } from '@component-controls/store';
-import { StoryTemplateOptions, TeplateFormats } from '../types';
-import { CliOptions } from './types';
-import { saveTemplate } from './save-template';
+import { StoryTemplateOptions, TeplateFormats } from '../utils';
+import { CliOptions } from './utils';
+import { saveTemplate } from './save-test-template';
 import { createStoriesTemplate } from '../jest-templates/stories-template';
 import { createDocumentTemplate } from '../jest-templates/document-template';
 
@@ -42,6 +42,7 @@ export const cliStory = async (
     include,
     exclude,
     ally,
+    data,
   } = options;
   let documents: string[] = [];
 
@@ -62,33 +63,34 @@ export const cliStory = async (
     const basename = path.basename(name);
     const splitName = basename.split('.');
     const componentName = splitName[0];
+
     const fileFormat =
       format || (path.extname(name).startsWith('.ts') ? 'ts' : 'esm');
     const testName =
       test || formatExtension(`${componentName}.test.js`, fileFormat);
+
+    const docOptions = {
+      renderer,
+      format: fileFormat,
+      include,
+      exclude,
+      overwrite,
+      config,
+      test: testName,
+      bundle,
+      name: options.name || componentName,
+      storyPath: name,
+      ally,
+      data,
+      output: output
+        ? output
+        : bundle
+        ? path.dirname(bundle)
+        : path.dirname(name),
+    };
     const templateFn = generateDoc
       ? createDocumentTemplate
       : createStoriesTemplate;
-    await saveTemplate<StoryTemplateOptions>(
-      {
-        renderer,
-        format: fileFormat,
-        include,
-        exclude,
-        overwrite,
-        config,
-        test: testName,
-        bundle,
-        name: options.name || componentName,
-        storyPath: name,
-        ally,
-        output: output
-          ? output
-          : bundle
-          ? path.dirname(bundle)
-          : path.dirname(name),
-      },
-      templateFn,
-    );
+    await saveTemplate<StoryTemplateOptions>(docOptions, templateFn);
   }
 };

plugins/cc-cli/src/cli/cli.ts

@@ -2,7 +2,7 @@ import { cliArgs } from '@component-controls/webpack-compile/cli';
 import { jestCliArgs } from './args';
 import { cliStore } from './cli-store';
 import { cliStory } from './cli-story';
-import { CliOptions } from './types';
+import { CliOptions } from './utils';
 
 /**
  * cc-cli central function. based on the selected g/generate option will call the specific
@@ -23,6 +23,7 @@ export const run = async (): Promise<void> => {
     include,
     exclude,
     ally,
+    data,
   } = parsedArgs;
   switch (parsedArgs.generate) {
     case 'store':
@@ -38,6 +39,7 @@ export const run = async (): Promise<void> => {
         include,
         exclude,
         ally,
+        data,
       } as CliOptions);
     case 'story':
     case 'doc':
@@ -54,6 +56,7 @@ export const run = async (): Promise<void> => {
           include,
           exclude,
           ally,
+          data,
         } as CliOptions,
         parsedArgs.generate === 'doc',
       );

plugins/cc-cli/src/cli/save-data-template.ts

@@ -0,0 +1,45 @@
+import path from 'path';
+import fs from 'fs';
+import { CliOptions, getTestFolder } from './utils';
+import { TemplateOptions, DataImportOptions, relativeImport } from '../utils';
+import { createDataTemplate } from '../data-templates/data-template';
+
+/**
+ * save a data template file based on options
+ * @param options - the rendering and file options
+ */
+export const saveDataTemplate = async <P extends TemplateOptions>(
+  options: CliOptions<P>,
+): Promise<DataImportOptions | undefined> => {
+  const testFolder = getTestFolder(options);
+  if (!testFolder) {
+    return undefined;
+  }
+  const { test, overwrite } = options;
+  const dataName = test
+    .split('.')
+    .map((e, i) => (i === 1 ? 'data' : e))
+    .join('.');
+  const filePath = path.resolve(testFolder, dataName);
+  let existing: Record<string, any> | undefined = undefined;
+  if (fs.existsSync(filePath)) {
+    if (overwrite) {
+      //load existing data file
+      existing = require(filePath);
+    } else {
+      return undefined;
+    }
+  }
+  const dataTemplate = await createDataTemplate(options, existing);
+  if (dataTemplate) {
+    if (!fs.existsSync(testFolder)) {
+      fs.mkdirSync(testFolder);
+    }
+    fs.writeFileSync(filePath, dataTemplate.content, 'utf8');
+    return {
+      data: dataTemplate.data,
+      filePath: relativeImport(testFolder, filePath),
+    };
+  }
+  return undefined;
+};

plugins/cc-cli/src/cli/save-template.ts → plugins/cc-cli/src/cli/save-test-template.ts

@@ -1,34 +1,25 @@
 import path from 'path';
 import fs from 'fs';
-import { CliOptions } from './types';
-import { TemplateFunction, TemplateOptions } from '../types';
+import { CliOptions, getTestFolder } from './utils';
+import { TemplateFunction, TemplateOptions } from '../utils';
+import { saveDataTemplate } from './save-data-template';
 
 /**
  * save a template file based on options
  * @param options - the rendering and file options
  * @param templateFn - a selected templating function
+ * @param dataImports - the data import parameters - ie file to import and stories that have data values associated
  * @returns a promise, since the function is async
  */
 export const saveTemplate = async <P extends TemplateOptions>(
   options: CliOptions<P>,
   templateFn: TemplateFunction<P>,
 ): Promise<void> => {
-  const { test, overwrite, output, include, exclude, ...rest } = options;
-
-  //check if the test file name is to be included.
-  const testName = test.split('.')[0];
-  if (include && !include.includes(testName)) {
-    return;
-  }
-  if (exclude && exclude.includes(testName)) {
-    return;
-  }
-
-  let testFolder = output as string;
-
-  if (!path.isAbsolute(testFolder)) {
-    testFolder = path.resolve(process.cwd(), testFolder);
+  const testFolder = getTestFolder(options);
+  if (!testFolder) {
+    return undefined;
   }
+  const { test, overwrite, ...rest } = options;
 
   const testFilePath = path.resolve(testFolder, test);
 
@@ -38,10 +29,15 @@ export const saveTemplate = async <P extends TemplateOptions>(
     );
     return;
   }
-  const content = await templateFn(({
-    output: testFolder,
-    ...rest,
-  } as unknown) as P);
+  const dataTemplate = await saveDataTemplate(options);
+
+  const content = await templateFn(
+    ({
+      output: testFolder,
+      ...rest,
+    } as unknown) as P,
+    dataTemplate,
+  );
   if (content) {
     if (!fs.existsSync(testFolder)) {
       fs.mkdirSync(testFolder);

plugins/cc-cli/src/cli/utils.ts

@@ -0,0 +1,33 @@
+import path from 'path';
+import { TemplateOptions } from '../utils';
+
+export type CliOptions<P extends TemplateOptions = TemplateOptions> = {
+  overwrite: boolean;
+  test: string;
+  /**
+   * components to include
+   */
+  include?: string[];
+  /**
+   * components to exclude
+   */
+  exclude?: string[];
+} & P;
+
+export const getTestFolder = (options: CliOptions): string | undefined => {
+  const { test, output, include, exclude } = options;
+  //check if the test file name is to be included.
+  const testName = test.split('.')[0];
+  if (include && !include.includes(testName)) {
+    return undefined;
+  }
+  if (exclude && exclude.includes(testName)) {
+    return undefined;
+  }
+  let testFolder = output as string;
+
+  if (!path.isAbsolute(testFolder)) {
+    testFolder = path.resolve(process.cwd(), testFolder);
+  }
+  return testFolder;
+};